<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="sparkline">
        <title>Configuration, methods and events of Kendo UI DataViz Sparkline</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to configure Kendo UI Javascript sparkline widget in a few easy steps, use and change methods and events.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/dataviz/ui/sparkline.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/dataviz/ui/sparkline.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendodatavizuisparkline"><a href="#kendodatavizuisparkline">kendo.dataviz.ui.Sparkline</a></h1>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-axisDefaults">
<a href="#configuration-axisDefaults">axisDefaults </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Default options for all chart axes.</p>

<h3 id="configuration-categoryAxis">
<a href="#configuration-categoryAxis">categoryAxis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The category axis configuration options.</p>

<h3 id="configuration-categoryAxis.axisCrossingValue">
<a href="#configuration-categoryAxis.axisCrossingValue">categoryAxis.axisCrossingValue </a><code>Object  |</code><code> Date  |</code><code> Array</code>
</h3>

<p>Category index at which the first value axis crosses this axis. (Only for object)</p>

<p>Category indicies at which the value axes cross the category axis. (Only for array)</p>

<p><strong>Note:</strong>Specify an index greater than or equal to the number
of categories to denote the far end of the axis.</p>

<h3 id="configuration-categoryAxis.categories">
<a href="#configuration-categoryAxis.categories">categoryAxis.categories </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Array of category names.</p>

<h3 id="configuration-categoryAxis.color">
<a href="#configuration-categoryAxis.color">categoryAxis.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Color to apply to all axis elements. Any valid CSS color string will work here, including hex and rgb.
Individual color settings for line and labels take priority.</p>

<h3 id="configuration-categoryAxis.field">
<a href="#configuration-categoryAxis.field">categoryAxis.field </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the category name.</p>

<h3 id="configuration-categoryAxis.justified">
<a href="#configuration-categoryAxis.justified">categoryAxis.justified </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Positions categories and series points on major ticks. This removes the empty space before and after the series.</p>

<p>This option is ignored if either bar or column series are plotted on the axis.</p>

<h3 id="configuration-categoryAxis.labels">
<a href="#configuration-categoryAxis.labels">categoryAxis.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the axis labels.</p>

<h3 id="configuration-categoryAxis.labels.background">
<a href="#configuration-categoryAxis.labels.background">categoryAxis.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the labels. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.labels.border">
<a href="#configuration-categoryAxis.labels.border">categoryAxis.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-categoryAxis.labels.border.color">
<a href="#configuration-categoryAxis.labels.border.color">categoryAxis.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.labels.border.dashType">
<a href="#configuration-categoryAxis.labels.border.dashType">categoryAxis.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.labels.border.width">
<a href="#configuration-categoryAxis.labels.border.width">categoryAxis.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-categoryAxis.labels.color">
<a href="#configuration-categoryAxis.labels.color">categoryAxis.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the labels. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.labels.font">
<a href="#configuration-categoryAxis.labels.font">categoryAxis.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-categoryAxis.labels.format">
<a href="#configuration-categoryAxis.labels.format">categoryAxis.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The format of the labels.</p>

<h3 id="configuration-categoryAxis.labels.margin">
<a href="#configuration-categoryAxis.labels.margin">categoryAxis.labels.margin </a><code>Number  |</code><code> Object</code><em>(default: 0)</em>
</h3>

<p>The margin of the labels.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 0px (by default)
margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-categoryAxis.labels.mirror">
<a href="#configuration-categoryAxis.labels.mirror">categoryAxis.labels.mirror </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Mirrors the axis labels and ticks.
If the labels are normally on the left side of the axis,
mirroring the axis will render them to the right.</p>

<h3 id="configuration-categoryAxis.labels.padding">
<a href="#configuration-categoryAxis.labels.padding">categoryAxis.labels.padding </a><code>Number  |</code><code> Object</code><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-categoryAxis.labels.rotation">
<a href="#configuration-categoryAxis.labels.rotation">categoryAxis.labels.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The rotation angle of the labels.</p>

<h3 id="configuration-categoryAxis.labels.skip">
<a href="#configuration-categoryAxis.labels.skip">categoryAxis.labels.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>Number of labels to skip.
Skips rendering the first n labels.</p>

<h3 id="configuration-categoryAxis.labels.step">
<a href="#configuration-categoryAxis.labels.step">categoryAxis.labels.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>Label rendering step.
Every n-th label is rendered where n is the step</p>

<h3 id="configuration-categoryAxis.labels.template">
<a href="#configuration-categoryAxis.labels.template">categoryAxis.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
<li>dataItem - the data item, in case a field has been specified</li>
</ul>

<h3 id="configuration-categoryAxis.labels.visible">
<a href="#configuration-categoryAxis.labels.visible">categoryAxis.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the labels.</p>

<h3 id="configuration-categoryAxis.line">
<a href="#configuration-categoryAxis.line">categoryAxis.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the axis line. This will also effect major and minor ticks, but not gridlines.</p>

<h3 id="configuration-categoryAxis.line.color">
<a href="#configuration-categoryAxis.line.color">categoryAxis.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines. Any valid CSS color string will work here, including hex and rgb.</p>

<p><strong>Note:</strong>This will also effect the major and minor ticks, but not the grid lines.</p>

<h3 id="configuration-categoryAxis.line.dashType">
<a href="#configuration-categoryAxis.line.dashType">categoryAxis.line.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the line.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.line.visible">
<a href="#configuration-categoryAxis.line.visible">categoryAxis.line.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-categoryAxis.line.width">
<a href="#configuration-categoryAxis.line.width">categoryAxis.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the line. This will also effect the major and minor ticks, but
not the grid lines.</p>

<h3 id="configuration-categoryAxis.majorGridLines">
<a href="#configuration-categoryAxis.majorGridLines">categoryAxis.majorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the major grid lines.
These are the lines that are an extension of the major ticks through the body of the chart.</p>

<h3 id="configuration-categoryAxis.majorGridLines.color">
<a href="#configuration-categoryAxis.majorGridLines.color">categoryAxis.majorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.majorGridLines.dashType">
<a href="#configuration-categoryAxis.majorGridLines.dashType">categoryAxis.majorGridLines.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the grid lines.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.majorGridLines.visible">
<a href="#configuration-categoryAxis.majorGridLines.visible">categoryAxis.majorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-categoryAxis.majorGridLines.width">
<a href="#configuration-categoryAxis.majorGridLines.width">categoryAxis.majorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the lines.</p>

<h3 id="configuration-categoryAxis.majorGridLines.step">
<a href="#configuration-categoryAxis.majorGridLines.step">categoryAxis.majorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis major grid lines.</p>

<h3 id="configuration-categoryAxis.majorGridLines.skip">
<a href="#configuration-categoryAxis.majorGridLines.skip">categoryAxis.majorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis major grid lines.</p>

<h3 id="configuration-categoryAxis.majorTicks">
<a href="#configuration-categoryAxis.majorTicks">categoryAxis.majorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The major ticks of the axis.</p>

<h3 id="configuration-categoryAxis.majorTicks.size">
<a href="#configuration-categoryAxis.majorTicks.size">categoryAxis.majorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 4)</em>
</h3>

<p>The axis major tick size. This is the length of the line in pixels that is drawn to indicate the tick
on the chart.</p>

<h3 id="configuration-categoryAxis.majorTicks.visible">
<a href="#configuration-categoryAxis.majorTicks.visible">categoryAxis.majorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the major ticks.</p>

<h3 id="configuration-categoryAxis.majorTicks.color">
<a href="#configuration-categoryAxis.majorTicks.color">categoryAxis.majorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the category axis major ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.majorTicks.width">
<a href="#configuration-categoryAxis.majorTicks.width">categoryAxis.majorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the major ticks in pixels.</p>

<h3 id="configuration-categoryAxis.majorTicks.step">
<a href="#configuration-categoryAxis.majorTicks.step">categoryAxis.majorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis major ticks.</p>

<h3 id="configuration-categoryAxis.majorTicks.skip">
<a href="#configuration-categoryAxis.majorTicks.skip">categoryAxis.majorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis major ticks.</p>

<h3 id="configuration-categoryAxis.minorGridLines">
<a href="#configuration-categoryAxis.minorGridLines">categoryAxis.minorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the minor grid lines.  These are the lines that are an extension of the minor ticks through
the body of the chart.</p>

<p>Note that minor grid lines are not visible by default, therefore none of these settings will take effect with the minor grid lines visibility being set to<strong>true</strong>.</p>

<h3 id="configuration-categoryAxis.minorGridLines.color">
<a href="#configuration-categoryAxis.minorGridLines.color">categoryAxis.minorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines. Any valid CSS color string will work here, including hex and
rgb.</p>

<p>Note that this setting has no effect if the visibility of the minor
grid lines is not set to<strong>true</strong>.</p>

<h3 id="configuration-categoryAxis.minorGridLines.dashType">
<a href="#configuration-categoryAxis.minorGridLines.dashType">categoryAxis.minorGridLines.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the grid lines.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.minorGridLines.visible">
<a href="#configuration-categoryAxis.minorGridLines.visible">categoryAxis.minorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-categoryAxis.minorGridLines.width">
<a href="#configuration-categoryAxis.minorGridLines.width">categoryAxis.minorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the lines.</p>

<p>Note that this setting has no effect if the visibility of the minor
grid lines is not set to<strong>true</strong>.</p>

<h3 id="configuration-categoryAxis.minorGridLines.step">
<a href="#configuration-categoryAxis.minorGridLines.step">categoryAxis.minorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis minor grid lines.</p>

<h3 id="configuration-categoryAxis.minorGridLines.skip">
<a href="#configuration-categoryAxis.minorGridLines.skip">categoryAxis.minorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis minor grid lines.</p>

<h3 id="configuration-categoryAxis.minorTicks">
<a href="#configuration-categoryAxis.minorTicks">categoryAxis.minorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The minor ticks of the axis.</p>

<h3 id="configuration-categoryAxis.minorTicks.size">
<a href="#configuration-categoryAxis.minorTicks.size">categoryAxis.minorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 3)</em>
</h3>

<p>The axis minor tick size. This is the length of the line in pixels that is drawn to indicate the tick
on the chart.</p>

<h3 id="configuration-categoryAxis.minorTicks.visible">
<a href="#configuration-categoryAxis.minorTicks.visible">categoryAxis.minorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the minor ticks.</p>

<h3 id="configuration-categoryAxis.minorTicks.color">
<a href="#configuration-categoryAxis.minorTicks.color">categoryAxis.minorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the category axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.minorTicks.width">
<a href="#configuration-categoryAxis.minorTicks.width">categoryAxis.minorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the minor ticks in pixels.</p>

<h3 id="configuration-categoryAxis.minorTicks.step">
<a href="#configuration-categoryAxis.minorTicks.step">categoryAxis.minorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the category axis minor ticks.</p>

<h3 id="configuration-categoryAxis.minorTicks.skip">
<a href="#configuration-categoryAxis.minorTicks.skip">categoryAxis.minorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the category axis minor ticks.</p>

<h3 id="configuration-categoryAxis.name">
<a href="#configuration-categoryAxis.name">categoryAxis.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "primary")</em>
</h3>

<p>The unique axis name.</p>

<h3 id="configuration-categoryAxis.plotBands">
<a href="#configuration-categoryAxis.plotBands">categoryAxis.plotBands </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The plot bands of the category axis.</p>

<h3 id="configuration-categoryAxis.plotBands.from">
<a href="#configuration-categoryAxis.plotBands.from">categoryAxis.plotBands.from </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The start position of the plot band in axis units.</p>

<h3 id="configuration-categoryAxis.plotBands.to">
<a href="#configuration-categoryAxis.plotBands.to">categoryAxis.plotBands.to </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The end position of the plot band in axis units.</p>

<h3 id="configuration-categoryAxis.plotBands.color">
<a href="#configuration-categoryAxis.plotBands.color">categoryAxis.plotBands.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the plot band.</p>

<h3 id="configuration-categoryAxis.plotBands.opacity">
<a href="#configuration-categoryAxis.plotBands.opacity">categoryAxis.plotBands.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the plot band.</p>

<h3 id="configuration-categoryAxis.reverse">
<a href="#configuration-categoryAxis.reverse">categoryAxis.reverse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Reverses the axis direction -
categories are listed from right to left and from top to bottom.</p>

<h3 id="configuration-categoryAxis.title">
<a href="#configuration-categoryAxis.title">categoryAxis.title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The title of the category axis.</p>

<h3 id="configuration-categoryAxis.title.background">
<a href="#configuration-categoryAxis.title.background">categoryAxis.title.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the title. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-categoryAxis.title.border">
<a href="#configuration-categoryAxis.title.border">categoryAxis.title.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the title.</p>

<h3 id="configuration-categoryAxis.title.border.color">
<a href="#configuration-categoryAxis.title.border.color">categoryAxis.title.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-categoryAxis.title.border.dashType">
<a href="#configuration-categoryAxis.title.border.dashType">categoryAxis.title.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-categoryAxis.title.border.width">
<a href="#configuration-categoryAxis.title.border.width">categoryAxis.title.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-categoryAxis.title.color">
<a href="#configuration-categoryAxis.title.color">categoryAxis.title.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the title. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-categoryAxis.title.font">
<a href="#configuration-categoryAxis.title.font">categoryAxis.title.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "16px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the title.</p>

<h3 id="configuration-categoryAxis.title.margin">
<a href="#configuration-categoryAxis.title.margin">categoryAxis.title.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 5)</em>
</h3>

<p>The margin of the title.</p>

<h3 id="configuration-categoryAxis.title.position">
<a href="#configuration-categoryAxis.title.position">categoryAxis.title.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "center")</em>
</h3>

<p>The position of the title.</p>

<h4><em>"top"</em></h4>

<p>The axis title is positioned on the top (applicable to vertical axis)</p>

<h4><em>"bottom"</em></h4>

<p>The axis title is positioned on the bottom (applicable to vertical axis)</p>

<h4><em>"left"</em></h4>

<p>The axis title is positioned on the left (applicable to horizontal axis)</p>

<h4><em>"right"</em></h4>

<p>The axis title is positioned on the right (applicable to horizontal axis)</p>

<h4><em>"center"</em></h4>

<p>The axis title is positioned in the center</p>

<h3 id="configuration-categoryAxis.title.rotation">
<a href="#configuration-categoryAxis.title.rotation">categoryAxis.title.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The rotation angle of the title.</p>

<h3 id="configuration-categoryAxis.title.text">
<a href="#configuration-categoryAxis.title.text">categoryAxis.title.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text of the title.</p>

<h3 id="configuration-categoryAxis.title.visible">
<a href="#configuration-categoryAxis.title.visible">categoryAxis.title.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the title.</p>

<h3 id="configuration-categoryAxis.type">
<a href="#configuration-categoryAxis.type">categoryAxis.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "category")</em>
</h3>

<p>The axis type.</p>

<h4><em>"category"</em></h4>

<p>Discrete category axis.</p>

<h4><em>"date"</em></h4>

<p>Specialized axis for displaying chronological data.</p>

<h3 id="configuration-categoryAxis.autoBaseUnitSteps">
<a href="#configuration-categoryAxis.autoBaseUnitSteps">categoryAxis.autoBaseUnitSteps </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Specifies the discrete<strong>baseUnitStep</strong>values when
either<strong>baseUnit</strong>is set to "fit" or<strong>baseUnitStep</strong>is set to "auto".</p>

<p>The default configuration is as follows:</p>

<ul>
<li><code>minutes: [1, 2, 5, 15, 30]</code></li>
<li><code>hours: [1, 2, 3, 6, 12]</code></li>
<li><code>days: [1, 2, 3]</code></li>
<li><code>weeks: [1, 2]</code></li>
<li><code>months: [1, 2, 3, 6]</code></li>
<li><code>years: [1, 2, 3, 5, 10, 25, 50]</code></li>
</ul>

<p>Each setting can be overriden individually.</p>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
    categoryAxis: {
        categories: [
            new Date("2012/02/01 00:00:00"),
            new Date("2012/02/02 00:00:00"),
            new Date("2012/02/20 00:00:00")
        ],
        baseUnitStep: "auto",
        autoBaseUnitSteps: {
            days: [3]
        }
    },
    ...
});
</code></pre>

<h3 id="configuration-categoryAxis.baseUnit">
<a href="#configuration-categoryAxis.baseUnit">categoryAxis.baseUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The base time interval for the axis.
The default baseUnit is determined automatically from the minimum difference
between subsequent categories. Available options:</p>

<ul>
<li>minutes</li>
<li>hours</li>
<li>days</li>
<li>weeks</li>
<li>months</li>
<li>years
<em>**fit</em>*</li>
</ul>

<p>Setting<strong>baseUnit</strong>to "fit" will set such base unit and<strong>baseUnitStep</strong>
that the total number of categories does not exceed<strong>maxDateGroups</strong>.</p>

<p>Series data is aggregated for the specified base unit by using the
<strong>series.aggregate</strong>function.</p>

<h3 id="configuration-categoryAxis.baseUnitStep">
<a href="#configuration-categoryAxis.baseUnitStep">categoryAxis.baseUnitStep </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 1)</em>
</h3>

<p>Sets the step (interval) between categories in base units.
Specifiying "auto" will set the step to such value that the total number of categories does not exceed<strong>maxDateGroups</strong>.</p>

<p>This option is ignored if<strong>baseUnit</strong>is set to "fit".</p>

<h3 id="configuration-categoryAxis.labels.culture">
<a href="#configuration-categoryAxis.labels.culture">categoryAxis.labels.culture </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Culture to use for formatting the dates. See <a href="/framework/globalization/overview">Globalization</a> for more information.
It uses the global culture by default.</p>

<h3 id="configuration-categoryAxis.labels.dateFormats">
<a href="#configuration-categoryAxis.labels.dateFormats">categoryAxis.labels.dateFormats </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Date format strings</p>

<h4><em>"hours"</em></h4>

<p>"HH:mm"</p>

<h4><em>"days"</em></h4>

<p>"M/d"</p>

<h4><em>"weeks"</em></h4>

<p>"M/d"</p>

<h4><em>"months"</em></h4>

<p>"MMM 'yy"</p>

<h4><em>"years"</em></h4>

<p>"yyyy"</p>

<p>The Chart will choose the appropriate format for the current <code>baseUnit</code>.
Setting the labels<strong>format</strong>option will override these defaults.</p>

<h3 id="configuration-categoryAxis.max">
<a href="#configuration-categoryAxis.max">categoryAxis.max </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The last date displayed on the axis.
By default, the minimum date is the same as the last category.
This is often used in combination with the<strong>min</strong>and<strong>roundToBaseUnit</strong>configuration options to
set up a fixed date range.</p>

<h3 id="configuration-categoryAxis.min">
<a href="#configuration-categoryAxis.min">categoryAxis.min </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The first date displayed on the axis.
By default, the minimum date is the same as the first category.
This is often used in combination with the<strong>max</strong>and<strong>roundToBaseUnit</strong>configuration options to
set up a fixed date range.</p>

<h3 id="configuration-categoryAxis.roundToBaseUnit">
<a href="#configuration-categoryAxis.roundToBaseUnit">categoryAxis.roundToBaseUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>By default, the first and last dates will be rounded off to the nearest base unit.
Specifying<strong>false</strong>for this option will disable this behavior.</p>

<p>This option is most useful in combination with explicit<strong>min</strong>and<strong>max</strong>dates.</p>

<p>It will be ignored if either bar or column series are plotted on the axis.</p>

<h3 id="configuration-categoryAxis.weekStartDay">
<a href="#configuration-categoryAxis.weekStartDay">categoryAxis.weekStartDay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: kendo.days.Sunday)</em>
</h3>

<p>Specifies the week start day when<strong>baseUnit</strong>is set to "weeks".
Use the <em>kendo.days</em> constants to specify the day by name.</p>

<ul>
<li>kendo.days.Sunday (0)</li>
<li>kendo.days.Monday (1)</li>
<li>kendo.days.Tuesday (2)</li>
<li>kendo.days.Wednesday (3)</li>
<li>kendo.days.Thursday (4)</li>
<li>kendo.days.Friday (5)</li>
<li>kendo.days.Saturday (6)</li>
</ul>

<h3 id="configuration-categoryAxis.maxDateGroups">
<a href="#configuration-categoryAxis.maxDateGroups">categoryAxis.maxDateGroups </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 10)</em>
</h3>

<p>Specifies the maximum number of groups (categories) to produce when
either<strong>baseUnit</strong>is set to "fit" or<strong>baseUnitStep</strong>is set to "auto".</p>

<p>This option is ignored in all other cases.</p>

<h3 id="configuration-categoryAxis.visible">
<a href="#configuration-categoryAxis.visible">categoryAxis.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the axis.</p>

<h3 id="configuration-categoryAxis.crosshair">
<a href="#configuration-categoryAxis.crosshair">categoryAxis.crosshair </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair configuration options.</p>

<h3 id="configuration-categoryAxis.crosshair.color">
<a href="#configuration-categoryAxis.crosshair.color">categoryAxis.crosshair.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.width">
<a href="#configuration-categoryAxis.crosshair.width">categoryAxis.crosshair.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.opacity">
<a href="#configuration-categoryAxis.crosshair.opacity">categoryAxis.crosshair.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.dashType">
<a href="#configuration-categoryAxis.crosshair.dashType">categoryAxis.crosshair.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The dash type of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.visible">
<a href="#configuration-categoryAxis.crosshair.visible">categoryAxis.crosshair.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The dash type of the crosshair.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip">
<a href="#configuration-categoryAxis.crosshair.tooltip">categoryAxis.crosshair.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair tooltip configuration options.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.background">
<a href="#configuration-categoryAxis.crosshair.tooltip.background">categoryAxis.crosshair.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.border">
<a href="#configuration-categoryAxis.crosshair.tooltip.border">categoryAxis.crosshair.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.border.color">
<a href="#configuration-categoryAxis.crosshair.tooltip.border.color">categoryAxis.crosshair.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.border.width">
<a href="#configuration-categoryAxis.crosshair.tooltip.border.width">categoryAxis.crosshair.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.color">
<a href="#configuration-categoryAxis.crosshair.tooltip.color">categoryAxis.crosshair.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.font">
<a href="#configuration-categoryAxis.crosshair.tooltip.font">categoryAxis.crosshair.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-categoryAxis.crosshair.tooltip.format">
<a href="#configuration-categoryAxis.crosshair.tooltip.format">categoryAxis.crosshair.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format.</p>

<h4>Example</h4>

<pre><code>//sets format of the tooltip
format: "C"
</code></pre>

<h3 id="configuration-categoryAxis.crosshair.tooltip.padding">
<a href="#configuration-categoryAxis.crosshair.tooltip.padding">categoryAxis.crosshair.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-categoryAxis.crosshair.tooltip.template">
<a href="#configuration-categoryAxis.crosshair.tooltip.template">categoryAxis.crosshair.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li> <strong>value</strong>- the point value (either a number or an object)</li>
</ul>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
     type: "area",
     data: [200, 450, 300, 125],
     categoryAxis: {
         crosshair: {
             tooltip: {
                 template: "|#= value #|"
             }
         }
     }
});
</code></pre>

<h3 id="configuration-categoryAxis.crosshair.tooltip.visible">
<a href="#configuration-categoryAxis.crosshair.tooltip.visible">categoryAxis.crosshair.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-categoryAxis.notes">
<a href="#configuration-categoryAxis.notes">categoryAxis.notes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The category axis notes configuration.</p>

<h3 id="configuration-categoryAxis.notes.position">
<a href="#configuration-categoryAxis.notes.position">categoryAxis.notes.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the category axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-categoryAxis.notes.icon">
<a href="#configuration-categoryAxis.notes.icon">categoryAxis.notes.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the notes.</p>

<h3 id="configuration-categoryAxis.notes.icon.background">
<a href="#configuration-categoryAxis.notes.icon.background">categoryAxis.notes.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the notes icon.</p>

<h4>Example - set the category axis notes icon background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.border">
<a href="#configuration-categoryAxis.notes.icon.border">categoryAxis.notes.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h4>Example - set the category axis notes icon border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.border.color">
<a href="#configuration-categoryAxis.notes.icon.border.color">categoryAxis.notes.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h4>Example - set the category axis notes icon border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.border.width">
<a href="#configuration-categoryAxis.notes.icon.border.width">categoryAxis.notes.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h4>Example - set the category axis notes icon border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.size">
<a href="#configuration-categoryAxis.notes.icon.size">categoryAxis.notes.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h4>Example - set the category axis notes icon size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        size: 30
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.type">
<a href="#configuration-categoryAxis.notes.icon.type">categoryAxis.notes.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
</ul>

<h4>Example - set the category axis notes icon shape</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        shape: "triangle"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.icon.visible">
<a href="#configuration-categoryAxis.notes.icon.visible">categoryAxis.notes.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h4>Example - set the category axis notes icon visibility</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label">
<a href="#configuration-categoryAxis.notes.label">categoryAxis.notes.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the notes.</p>

<h3 id="configuration-categoryAxis.notes.label.background">
<a href="#configuration-categoryAxis.notes.label.background">categoryAxis.notes.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis label background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.border">
<a href="#configuration-categoryAxis.notes.label.border">categoryAxis.notes.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h4>Example - set the category axis label border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          color: "green",
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.border.color">
<a href="#configuration-categoryAxis.notes.label.border.color">categoryAxis.notes.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis label border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          color: "green"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.border.dashType">
<a href="#configuration-categoryAxis.notes.label.border.dashType">categoryAxis.notes.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the category axis label border dash type</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.border.width">
<a href="#configuration-categoryAxis.notes.label.border.width">categoryAxis.notes.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h4>Example - set the category axis label border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.color">
<a href="#configuration-categoryAxis.notes.label.color">categoryAxis.notes.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis label color as a hex string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.font">
<a href="#configuration-categoryAxis.notes.label.font">categoryAxis.notes.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the label.</p>

<h4>Example - set the chart series label font</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        font: "20px sans-serif"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.template">
<a href="#configuration-categoryAxis.notes.label.template">categoryAxis.notes.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
</ul>

<h4>Example - set the category axis notes label template as a string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        template: "Year: #: value #"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.visible">
<a href="#configuration-categoryAxis.notes.label.visible">categoryAxis.notes.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category notes label. By default the category notes label are visible.</p>

<h4>Example - hide the category axis notes label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.rotation">
<a href="#configuration-categoryAxis.notes.label.rotation">categoryAxis.notes.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h4>Example - rotate the category axis notes label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        rotation: 90
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.format">
<a href="#configuration-categoryAxis.notes.label.format">categoryAxis.notes.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the notes label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<h4>Example - set the category axis notes label format</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        format: "Category slot: {0}"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.label.position">
<a href="#configuration-categoryAxis.notes.label.position">categoryAxis.notes.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the labels.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-categoryAxis.notes.line">
<a href="#configuration-categoryAxis.notes.line">categoryAxis.notes.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the notes.</p>

<h3 id="configuration-categoryAxis.notes.line.width">
<a href="#configuration-categoryAxis.notes.line.width">categoryAxis.notes.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the notes.</p>

<h4>Example - set the category axis notes line width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        width: 4
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.line.color">
<a href="#configuration-categoryAxis.notes.line.color">categoryAxis.notes.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the notes.</p>

<h4>Example - set the category axis notes color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.line.length">
<a href="#configuration-categoryAxis.notes.line.length">categoryAxis.notes.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line length of the notes.</p>

<h4>Example - set the category axis notes color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        length: 20
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data">
<a href="#configuration-categoryAxis.notes.data">categoryAxis.notes.data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The items of the notes.</p>

<h3 id="configuration-categoryAxis.notes.data.value">
<a href="#configuration-categoryAxis.notes.data.value">categoryAxis.notes.data.value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The value of the note.</p>

<h3 id="configuration-categoryAxis.notes.data.position">
<a href="#configuration-categoryAxis.notes.data.position">categoryAxis.notes.data.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the category axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-categoryAxis.notes.data.icon">
<a href="#configuration-categoryAxis.notes.data.icon">categoryAxis.notes.data.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the note.</p>

<h3 id="configuration-categoryAxis.notes.data.icon.background">
<a href="#configuration-categoryAxis.notes.data.icon.background">categoryAxis.notes.data.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the note icon.</p>

<h4>Example - set the category axis note icon background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          background: "red"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.border">
<a href="#configuration-categoryAxis.notes.data.icon.border">categoryAxis.notes.data.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h4>Example - set the category axis note icon border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.border.color">
<a href="#configuration-categoryAxis.notes.data.icon.border.color">categoryAxis.notes.data.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h4>Example - set the category axis note icon border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.border.width">
<a href="#configuration-categoryAxis.notes.data.icon.border.width">categoryAxis.notes.data.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h4>Example - set the category axis note icon border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.size">
<a href="#configuration-categoryAxis.notes.data.icon.size">categoryAxis.notes.data.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h4>Example - set the category axis note icon size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          size: 30
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.type">
<a href="#configuration-categoryAxis.notes.data.icon.type">categoryAxis.notes.data.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
</ul>

<h4>Example - set the category axis note icon shape</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          shape: "triangle"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.icon.visible">
<a href="#configuration-categoryAxis.notes.data.icon.visible">categoryAxis.notes.data.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h4>Example - set the category axis note icon visibility</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          visible: false
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label">
<a href="#configuration-categoryAxis.notes.data.label">categoryAxis.notes.data.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the note.</p>

<h3 id="configuration-categoryAxis.notes.data.label.background">
<a href="#configuration-categoryAxis.notes.data.label.background">categoryAxis.notes.data.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis note label background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notesdata {
      data: [{
        value: 1,
        label: {
          background: "red"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.border">
<a href="#configuration-categoryAxis.notes.data.label.border">categoryAxis.notes.data.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h4>Example - set the category axis note label border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green",
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.border.color">
<a href="#configuration-categoryAxis.notes.data.label.border.color">categoryAxis.notes.data.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis note label border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.border.dashType">
<a href="#configuration-categoryAxis.notes.data.label.border.dashType">categoryAxis.notes.data.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the category axis note label border dash type</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.border.width">
<a href="#configuration-categoryAxis.notes.data.label.border.width">categoryAxis.notes.data.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h4>Example - set the category axis note label border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.color">
<a href="#configuration-categoryAxis.notes.data.label.color">categoryAxis.notes.data.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the note label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the category axis note label color as a hex string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.font">
<a href="#configuration-categoryAxis.notes.data.label.font">categoryAxis.notes.data.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the note label.</p>

<h4>Example - set the category axis note label font</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          font: "20px sans-serif"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.template">
<a href="#configuration-categoryAxis.notes.data.label.template">categoryAxis.notes.data.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the category value</li>
</ul>

<h4>Example - set the category axis note label template as a string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          template: "Year: #: value #"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.visible">
<a href="#configuration-categoryAxis.notes.data.label.visible">categoryAxis.notes.data.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the category notes label. By default the category notes label are visible.</p>

<h4>Example - hide the category axis note label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          visible: false
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.rotation">
<a href="#configuration-categoryAxis.notes.data.label.rotation">categoryAxis.notes.data.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h4>Example - rotate the category axis note label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          rotation: 90
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.format">
<a href="#configuration-categoryAxis.notes.data.label.format">categoryAxis.notes.data.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the note label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the category value.</p>

<h4>Example - set the category axis note label format</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          format: "Category slot: {0}"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.text">
<a href="#configuration-categoryAxis.notes.data.label.text">categoryAxis.notes.data.label.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The label note text.</p>

<h4>Example - set the category axis label note text</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          text: "A"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.label.position">
<a href="#configuration-categoryAxis.notes.data.label.position">categoryAxis.notes.data.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the category axis note label.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-categoryAxis.notes.data.line">
<a href="#configuration-categoryAxis.notes.data.line">categoryAxis.notes.data.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the note.</p>

<h3 id="configuration-categoryAxis.notes.data.line.width">
<a href="#configuration-categoryAxis.notes.data.line.width">categoryAxis.notes.data.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the note.</p>

<h4>Example - set the category axis note line width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          width: 4
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.line.color">
<a href="#configuration-categoryAxis.notes.data.line.color">categoryAxis.notes.data.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the note.</p>

<h4>Example - set the category axis note color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-categoryAxis.notes.data.line.length">
<a href="#configuration-categoryAxis.notes.data.line.length">categoryAxis.notes.data.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line length of the note.</p>

<h4>Example - set the category axis note color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          length: 20
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-chartArea">
<a href="#configuration-chartArea">chartArea </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The chart area configuration options.
This is the entire visible area of the chart.</p>

<h3 id="configuration-chartArea.background">
<a href="#configuration-chartArea.background">chartArea.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "white")</em>
</h3>

<p>The background color of the chart area.</p>

<h3 id="configuration-chartArea.opacity">
<a href="#configuration-chartArea.opacity">chartArea.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The background opacity of the chart area.</p>

<h3 id="configuration-chartArea.border">
<a href="#configuration-chartArea.border">chartArea.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the chart area.</p>

<h3 id="configuration-chartArea.border.color">
<a href="#configuration-chartArea.border.color">chartArea.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-chartArea.border.dashType">
<a href="#configuration-chartArea.border.dashType">chartArea.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-chartArea.border.width">
<a href="#configuration-chartArea.border.width">chartArea.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-chartArea.height">
<a href="#configuration-chartArea.height">chartArea.height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 400)</em>
</h3>

<p>The height of the chart area.</p>

<h3 id="configuration-chartArea.margin">
<a href="#configuration-chartArea.margin">chartArea.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 2)</em>
</h3>

<p>The margin of the chart area.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 5px (by default)
margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-chartArea.width">
<a href="#configuration-chartArea.width">chartArea.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 600)</em>
</h3>

<p>The width of the chart area.</p>

<h3 id="configuration-data">
<a href="#configuration-data">data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The data for the default sparkline series.</p>

<p>Will be discarded if series are supplied.</p>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 5]
});

// Same as:
$("#sparkline").kendoSparkline([1, 2, 3, 5]);
</code></pre>

<h3 id="configuration-dataSource">
<a href="#configuration-dataSource">dataSource </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>DataSource configuration or instance.</p>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
    dataSource: {
        transport: {
             read: "spain-electricity.json"
        }
    },
    series: [{
        field: "value"
    }],
    categoryAxis: {
        field: "year"
    }
});

// Alternative configuration
var dataSource = new kendo.data.DataSource({
    transport: {
         read: "spain-electricity.json"
    }
});

$("#sparkline").kendoSparkline({
    dataSource: dataSource,
    series: [{
        field: "value"
    }],
    categoryAxis: {
        field: "year"
    }
});
</code></pre>

<h3 id="configuration-autoBind">
<a href="#configuration-autoBind">autoBind </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>Indicates whether the chart will call read on the data source initially.</p>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
    dataSource: chartDataSource,
    autoBind: false
});

// ...
chartDataSource.read();
</code></pre>

<h3 id="configuration-plotArea">
<a href="#configuration-plotArea">plotArea </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The plot area configuration options. This is the area containing the plotted series.</p>

<h3 id="configuration-plotArea.background">
<a href="#configuration-plotArea.background">plotArea.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "white")</em>
</h3>

<p>The background color of the plot area.</p>

<h3 id="configuration-plotArea.opacity">
<a href="#configuration-plotArea.opacity">plotArea.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The background opacity of the plot area.</p>

<h3 id="configuration-plotArea.border">
<a href="#configuration-plotArea.border">plotArea.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the plot area.</p>

<h3 id="configuration-plotArea.border.color">
<a href="#configuration-plotArea.border.color">plotArea.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-plotArea.border.dashType">
<a href="#configuration-plotArea.border.dashType">plotArea.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-plotArea.border.width">
<a href="#configuration-plotArea.border.width">plotArea.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-plotArea.margin">
<a href="#configuration-plotArea.margin">plotArea.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 5)</em>
</h3>

<p>The margin of the plot area.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 5px (by default)
margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-pointWidth">
<a href="#configuration-pointWidth">pointWidth </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 5)</em>
</h3>

<p>The width to allocate for each data point.</p>

<h3 id="configuration-renderAs">
<a href="#configuration-renderAs">renderAs </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Sets the preferred rendering engine.
If it is not supported by the browser, the Sparkline will switch to the first available mode.</p>

<p>The supported values are:</p>

<ul>
<li>"svg" - renders the widget as inline SVG document, if available</li>
<li>"canvas" - renders the widget as a Canvas element, if available.</li>
</ul>

<h3 id="configuration-Example"><a href="#configuration-Example">Example - Render as Canvas, if supported</a></h3>

<pre><code>&lt;span id="sparkline"&gt;&lt;/div&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
    renderAs: "canvas",
    type: "column",
    data: [1, 2, 3, 4]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series">
<a href="#configuration-series">series </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Array of series definitions.</p>

<p>The series type is determined by the value of the type field.
If a type value is missing, the type is assumed to be the one specified in <code>seriesDefaults</code>.</p>

<p>Each series type has a different set of options.</p>

<blockquote>
<p><strong>Info:</strong>Some options accept function as argument. They will be evaluated for each point (supplied as parameter). The theme/seriesDefaults value will be used if no value is returned.</p>
</blockquote>

<h3 id="configuration-series.type">
<a href="#configuration-series.type">series.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "line")</em>
</h3>

<p>The type of the series. Available types:</p>

<ul>
<li>area</li>
<li>column (synonym: bar)</li>
<li>line</li>
<li>pie</li>
<li>bullet</li>
</ul>

<h3 id="configuration-series.dashType">
<a href="#configuration-series.dashType">series.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The series line dash type.</p>

<p><strong>Applicable only to line series</strong></p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-series.data">
<a href="#configuration-series.data">series.data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Array of data items. The data item type can be either a:</p>

<ul>
<li>Array of objects. Each point is bound to the specified series fields.</li>
<li>Array of numbers. Available for area, bar, column, pie and line series.</li>
</ul>

<h3 id="configuration-series.explodeField">
<a href="#configuration-series.explodeField">series.explodeField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing a Boolean value that indicates if the sector is exploded.</p>

<p><strong>Available for pie series</strong></p>

<h3 id="configuration-series.currentField">
<a href="#configuration-series.currentField">series.currentField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the current value.</p>

<p><strong>Available for bullet and verticalBullet series.</strong></p>

<h3 id="configuration-series.targetField">
<a href="#configuration-series.targetField">series.targetField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the target value.</p>

<p><strong>Available for bullet and verticalBullet series.</strong></p>

<p><strong>Available for pie series</strong></p>

<h3 id="configuration-series.field">
<a href="#configuration-series.field">series.field </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the series value.</p>

<h3 id="configuration-series.name">
<a href="#configuration-series.name">series.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The series name.</p>

<p>The name can also be a <a href="/api/framework/kendo#methods-template">template</a> which sets the name of the series when bound to grouped data source.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>  series - the series options</li>
<li>  group - the data group</li>
<li>  group.field - the name of the field used for grouping</li>
<li>  group.value - the field value for this group.</li>
</ul>

<h3 id="configuration-series.highlight">
<a href="#configuration-series.highlight">series.highlight </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the appearance of highlighted points.</p>

<h3 id="configuration-series.highlight.border">
<a href="#configuration-series.highlight.border">series.highlight.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of highlighted points. The color is computed automatically from the base point color.</p>

<p><strong>Applicable to pie series.</strong></p>

<h3 id="configuration-series.highlight.border.width">
<a href="#configuration-series.highlight.border.width">series.highlight.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.highlight.border.color">
<a href="#configuration-series.highlight.border.color">series.highlight.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color.</p>

<h3 id="configuration-series.highlight.border.opacity">
<a href="#configuration-series.highlight.border.opacity">series.highlight.border.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border opacity.</p>

<h3 id="configuration-series.highlight.color">
<a href="#configuration-series.highlight.color">series.highlight.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The highlight color.</p>

<p><strong>Available only for pie series</strong></p>

<h3 id="configuration-series.highlight.opacity">
<a href="#configuration-series.highlight.opacity">series.highlight.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the highlighted points.</p>

<p><strong>Applicable to pie series.</strong></p>

<h3 id="configuration-series.highlight.visible">
<a href="#configuration-series.highlight.visible">series.highlight.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>A value indicating if the series points should be highlighted.</p>

<h3 id="configuration-series.aggregate">
<a href="#configuration-series.aggregate">series.aggregate </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a> <em>(default: "max")</em>
</h3>

<p>The aggregate function to apply for date series.</p>

<p>This function is used when a category (an year, month, etc.) contains two or more points.
The function return value is displayed instead of the individual points.</p>

<p>The supported values are:</p>

<ul>
<li>"avg" - the average of all values for the date period.</li>
<li>"count" - the number of values for the date period.</li>
<li>"max" - the highest value for the date period.</li>
<li>"min" - the lowest value for the date period.</li>
<li>"sum" - the sum of all values for the date period. Defaults to 0 if no data points are defined.</li>
<li>"sumOrNull" - the sum of all values for the date period. Defaults to <code>null</code> if no data points are defined.</li>
<li>"first" - the first value</li>
<li>function(values, series, dataItems, category) - user-defined aggregate function. Returns single value or data item.</li>
<li>object  - (compound aggregate)<strong>Applicable to "candlestick" and ohlc "series"</strong>. Specifies the aggregate for each data item field.</li>
</ul>

<h3 id="configuration-series.axis">
<a href="#configuration-series.axis">series.axis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "primary")</em>
</h3>

<p>The name of the value axis to use.</p>

<p><strong>Applicable to area, bar, column and line series</strong></p>

<h3 id="configuration-series.border">
<a href="#configuration-series.border">series.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the points.</p>

<p><strong>Applicable to bar, column and pie series</strong></p>

<h3 id="configuration-series.border.color">
<a href="#configuration-series.border.color">series.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The color of the border.  It defaults to the color of the current series.</p>

<h3 id="configuration-series.border.dashType">
<a href="#configuration-series.border.dashType">series.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-series.border.opacity">
<a href="#configuration-series.border.opacity">series.border.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The border opacity.</p>

<h3 id="configuration-series.border.width">
<a href="#configuration-series.border.width">series.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 1)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.categoryField">
<a href="#configuration-series.categoryField">series.categoryField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the point category name.</p>

<p><strong>Applicable to pie series.</strong></p>

<h3 id="configuration-series.color">
<a href="#configuration-series.color">series.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The series base color. The supported values are:</p>

<ul>
<li>CSS color string, including hex and rgb</li>
<li>function(point) - user-defined function that will be evaluated for each point. Returning <code>undefined</code> will assume the default series color.</li>
</ul>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
     series: [{
         type: "column",
         data: [200, 450, 300, 125],
         color: "#ff0000"
     }]
});
</code></pre>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
     series: [{
         type: "column",
         data: [200, 450, 300, 125],
         color: function(point) {
            if (point.value &gt; 300) {
                // Colorize matching points
                return "#f00";
            }

            // Use default theme color
         }
     }]
});
</code></pre>

<h3 id="configuration-series.colorField">
<a href="#configuration-series.colorField">series.colorField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The data field containing the point color.</p>

<p><strong>Applicable for bar, column and pie series.</strong></p>

<h3 id="configuration-series.connectors">
<a href="#configuration-series.connectors">series.connectors </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label connectors options.</p>

<p><strong>Applicable to pie series.</strong></p>

<h3 id="configuration-series.connectors.color">
<a href="#configuration-series.connectors.color">series.connectors.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the connector line.</p>

<h3 id="configuration-series.connectors.padding">
<a href="#configuration-series.connectors.padding">series.connectors.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 4)</em>
</h3>

<p>The padding between the connector line and the label, and connector line and pie chart.</p>

<h3 id="configuration-series.connectors.width">
<a href="#configuration-series.connectors.width">series.connectors.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the connector line.</p>

<h3 id="configuration-series.gap">
<a href="#configuration-series.gap">series.gap </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1.5)</em>
</h3>

<p>The distance between category clusters.</p>

<p><strong>Applicable for bar and column series.</strong></p>

<h3 id="configuration-series.labels">
<a href="#configuration-series.labels">series.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the series data labels.</p>

<h3 id="configuration-series.labels.align">
<a href="#configuration-series.labels.align">series.labels.align </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "circle")</em>
</h3>

<p>Defines the alignment of the labels.</p>

<p><strong>Available for pie series.</strong></p>

<h4><em>"circle"</em></h4>

<p>The labels are positioned in circle around the chart.</p>

<h4><em>"column"</em></h4>

<p>The labels are positioned in columns to the left and right of the chart.</p>

<h3 id="configuration-series.labels.background">
<a href="#configuration-series.labels.background">series.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The background color of the labels.</p>

<h3 id="configuration-series.labels.border">
<a href="#configuration-series.labels.border">series.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-series.labels.border.color">
<a href="#configuration-series.labels.border.color">series.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-series.labels.border.dashType">
<a href="#configuration-series.labels.border.dashType">series.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-series.labels.border.width">
<a href="#configuration-series.labels.border.width">series.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.labels.color">
<a href="#configuration-series.labels.color">series.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The text color of the labels.</p>

<h3 id="configuration-series.labels.distance">
<a href="#configuration-series.labels.distance">series.labels.distance </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 35)</em>
</h3>

<p>The distance of the labels.</p>

<p><strong>Available for pie series.</strong></p>

<h3 id="configuration-series.labels.font">
<a href="#configuration-series.labels.font">series.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-series.labels.format">
<a href="#configuration-series.labels.format">series.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The format of the labels.</p>

<h4>Example</h4>

<pre><code>//sets format of the labels
format: "C"
</code></pre>

<h3 id="configuration-series.labels.margin">
<a href="#configuration-series.labels.margin">series.labels.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: { left: 5, right: 5})</em>
</h3>

<p>The margin of the labels.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and bottom margin to 1px
// margin left and right are with 5px (by default)
margin: { top: 1, bottom: 1 }
</code></pre>

<h3 id="configuration-series.labels.padding">
<a href="#configuration-series.labels.padding">series.labels.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-series.labels.position">
<a href="#configuration-series.labels.position">series.labels.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "above")</em>
</h3>

<p>Defines the position of the labels.</p>

<h4><em>"above"</em></h4>

<p>The label is positioned at the top of the marker.</p>

<p><strong>Applicable for area and line series.</strong></p>

<h4><em>"center"</em></h4>

<p>The label is positioned at the point center.</p>

<p><strong>Applicable for bar, column, pie series.</strong></p>

<h4><em>"insideEnd"</em></h4>

<p>The label is positioned inside, near the end of the point.</p>

<p><strong>Applicable for bar, column, pie series.</strong></p>

<h4><em>"insideBase"</em></h4>

<p>The label is positioned inside, near the base of the bar.</p>

<p><strong>Applicable for bar and column series.</strong></p>

<h4><em>"outsideEnd"</em></h4>

<p>The label is positioned outside, near the end of the bar.</p>

<p><strong>Applicable for bar, column, pie series.
Not applicable for stacked series.</strong></p>

<h4><em>"right"</em></h4>

<p>The label is positioned to the right of the marker.</p>

<p><strong>Applicable for area and line series.</strong></p>

<h4><em>"below"</em></h4>

<p>The label is positioned at the bottom of the marker.</p>

<p><strong>Applicable for area and line series.</strong></p>

<h4><em>"left"</em></h4>

<p>The label is positioned to the left of the marker.</p>

<p><strong>Applicable for area and line series.</strong></p>

<h3 id="configuration-series.labels.template">
<a href="#configuration-series.labels.template">series.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the chart series label.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>  category - the category name. Available for area, bar, column, bubble, donut, line and pie series.</li>
<li>  dataItem - the original data item used to construct the point. Will be null if binding to array.</li>
<li>  percentage - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.</li>
<li>  series - the data series</li>
<li>  value - the point value. Can be a number or object containing each bound field.</li>
</ul>

<h3 id="configuration-series.labels.visible">
<a href="#configuration-series.labels.visible">series.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the labels.</p>

<h3 id="configuration-series.line">
<a href="#configuration-series.line">series.line </a><code>String  |</code><code> Object</code>
</h3>

<p>Line options.</p>

<p><strong>Applicable to area series.</strong></p>

<h3 id="configuration-series.line.color">
<a href="#configuration-series.line.color">series.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color.</p>

<h3 id="configuration-series.line.opacity">
<a href="#configuration-series.line.opacity">series.line.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The line opacity.</p>

<h3 id="configuration-series.line.width">
<a href="#configuration-series.line.width">series.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: 0.5)</em>
</h3>

<p>The line width.</p>

<h3 id="configuration-series.line.style">
<a href="#configuration-series.line.style">series.line.style </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "normal")</em>
</h3>

<p>The supported values are:</p>

<ul>
<li>"normal" - The values will be connected with straight line.</li>
<li>"step" - The values will be connected with a line with right angle.</li>
<li>"smooth" - The values will be connected with a smooth line.</li>
</ul>

<blockquote>
<p>The default value is "normal".</p>

<p>The <code>style</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "area".</p>
</blockquote>

<h3 id="configuration-series.markers">
<a href="#configuration-series.markers">series.markers </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Marker options.</p>

<p><strong>Applicable to area and line series</strong></p>

<h3 id="configuration-series.markers.background">
<a href="#configuration-series.markers.background">series.markers.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The background color of the current series markers.</p>

<h3 id="configuration-series.markers.border">
<a href="#configuration-series.markers.border">series.markers.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The border of the markers.</p>

<h3 id="configuration-series.markers.border.color">
<a href="#configuration-series.markers.border.color">series.markers.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-series.markers.border.width">
<a href="#configuration-series.markers.border.width">series.markers.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.markers.size">
<a href="#configuration-series.markers.size">series.markers.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: 6)</em>
</h3>

<p>The marker size.</p>

<h3 id="configuration-series.markers.type">
<a href="#configuration-series.markers.type">series.markers.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "circle")</em>
</h3>

<p>Configures the markers shape type.</p>

<h4><em>"square"</em></h4>

<p>The marker shape is square.</p>

<h4><em>"triangle"</em></h4>

<p>The marker shape is triangle.</p>

<h4><em>"circle"</em></h4>

<p>The marker shape is circle.</p>

<h3 id="configuration-series.markers.visible">
<a href="#configuration-series.markers.visible">series.markers.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: false)</em>
</h3>

<p>The markers visibility.</p>

<h3 id="configuration-series.markers.rotation">
<a href="#configuration-series.markers.rotation">series.markers.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The rotation angle of the markers.</p>

<h3 id="configuration-series.missingValues">
<a href="#configuration-series.missingValues">series.missingValues </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The behavior for handling missing values. The supported values are:</p>

<ul>
<li>"gap" - the plot stops before the missing point and continues after it.</li>
<li>"interpolate" - the value is interpolated from neighboring points.</li>
<li>"zero" - the value is assumed to be zero.</li>
</ul>

<blockquote>
<p>The default value is "interpolate", except for "area" and stacked series which default to "zero".</p>

<p>The <code>missingValues</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "area", "line", "scatterLine", "radarLine", "radarArea", "polarLine" or "polarArea".</p>
</blockquote>

<h4>Example - set the missing values behavior</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [ {
    type: "line",
    missingValues: "gap",
    data: [1, 3, null, 4, 5]
  }]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series.style">
<a href="#configuration-series.style">series.style </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The supported values are:</p>

<ul>
<li>"normal" - The values will be connected with straight line.</li>
<li>"step" - The values will be connected with a line with right angle.</li>
<li>"smooth" - The values will be connected with a smooth line.</li>
</ul>

<blockquote>
<p>The default value is "normal".</p>

<p>The <code>style</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "line".</p>
</blockquote>

<h3 id="configuration-series.negativeColor">
<a href="#configuration-series.negativeColor">series.negativeColor </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Color to use for bars with negative values.</p>

<p><strong>Applicable only to bar and column series.</strong></p>

<h3 id="configuration-series.opacity">
<a href="#configuration-series.opacity">series.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The series opacity.</p>

<h3 id="configuration-series.overlay">
<a href="#configuration-series.overlay">series.overlay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The effects overlay.</p>

<h3 id="configuration-series.overlay.gradient">
<a href="#configuration-series.overlay.gradient">series.overlay.gradient </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The gradient name.</p>

<p>Available options:</p>

<p><em>**glass</em><em>(bar and column series)
*</em><em>roundedBevel</em><em>(pie series)
*</em><em>sharpBevel</em><em>(pie series)
*</em><em>none</em>*</p>

<h3 id="configuration-series.padding">
<a href="#configuration-series.padding">series.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The padding around the chart (equal on all sides).</p>

<p><strong>Available for pie series.</strong></p>

<h3 id="configuration-series.size">
<a href="#configuration-series.size">series.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size (or radius) of the series in pixels.
If not specified, the available space is split evenly between the series.</p>

<p><strong>Available for only.</strong></p>

<h3 id="configuration-series.startAngle">
<a href="#configuration-series.startAngle">series.startAngle </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 90)</em>
</h3>

<p>The start angle of the first segment.</p>

<p><strong>Available for pie series.</strong></p>

<h3 id="configuration-series.spacing">
<a href="#configuration-series.spacing">series.spacing </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0.4)</em>
</h3>

<p>Space between points as proportion of the point width.</p>

<p><strong>Available for bar and column series.</strong></p>

<h3 id="configuration-series.stack">
<a href="#configuration-series.stack">series.stack </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: false)</em>
</h3>

<p>A Boolean value indicating if the series should be stacked.
A string value is interpreted as <a href="#configuration-series.stack.group">series.stack.group</a>.</p>

<blockquote>
<p>The <code>stack</code> options is supported when <a href="#configuration-series.type">series.type</a> is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".</p>

<p>Stack settings of the first series are applied to the rest of the series.</p>
</blockquote>

<h4>Example - configure stack series</h4>

<pre><code>&lt;span id="sparkline"&gt;&lt;/span&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
  series: [
    { stack: true, data: [ 1, 2 , 3] },
    { data: [ 4, 5 , 6] }
  ]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series.stack.type">
<a href="#configuration-series.stack.type">series.stack.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The type of stack to plot. The following types are supported:</p>

<ul>
<li>"normal" - the value of the stack is the sum of all points in the category (or group)</li>
<li>"100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.</li>
</ul>

<h4>Example - configure 100% stacked series</h4>

<pre><code>&lt;span id="sparkline"&gt;&lt;/span&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
  series: [
    { stack: { type: "100%" }, data: [ 1, 2 ] },
    { data: [ 10, 20 ] }
  ]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series.stack.group">
<a href="#configuration-series.stack.group">series.stack.group </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Indicates that the series should be stacked in a group with the specified name.</p>

<blockquote>
<p>The <code>group</code> option is supported when <a href="#configuration-series.type">series.type</a> is set to "bar" or "column".</p>
</blockquote>

<h4>Example - configure stack groups</h4>

<pre><code>&lt;span id="sparkline"&gt;&lt;/span&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
  seriesDefaults: {
    type: "column"
  },
  series: [
    { stack: { group: "a" }, data: [ 1, 2 ] },
    { stack: { group: "a" }, data: [ 3, 4 ] },
    { stack: { group: "b" }, data: [ -1, -2 ] },
    { stack: { group: "b" }, data: [ -3, -4 ] }
  ]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-series.tooltip">
<a href="#configuration-series.tooltip">series.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data point tooltip configuration options.</p>

<h3 id="configuration-series.tooltip.background">
<a href="#configuration-series.tooltip.background">series.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip. The default is determined from the series color.</p>

<h3 id="configuration-series.tooltip.border">
<a href="#configuration-series.tooltip.border">series.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-series.tooltip.border.color">
<a href="#configuration-series.tooltip.border.color">series.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-series.tooltip.border.width">
<a href="#configuration-series.tooltip.border.width">series.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.tooltip.color">
<a href="#configuration-series.tooltip.color">series.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip. The default is the same as the series labels color.</p>

<h3 id="configuration-series.tooltip.font">
<a href="#configuration-series.tooltip.font">series.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-series.tooltip.format">
<a href="#configuration-series.tooltip.format">series.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format. Format variables depend on the series type:</p>

<ul>
<li>Area, bar, column, line and pie

<ul>
<li> <strong>0</strong>- value</li>
</ul>
</li>
</ul>

<h4>Example</h4>

<pre><code>//sets format of the tooltip
format: "{0:C}--{1:C}"
</code></pre>

<h3 id="configuration-series.tooltip.padding">
<a href="#configuration-series.tooltip.padding">series.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-series.tooltip.template">
<a href="#configuration-series.tooltip.template">series.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li> <strong>value</strong>- the point value (either a number or an object)</li>
<li> <strong>category</strong>- the category name</li>
<li> <strong>series</strong>- the data series</li>
<li> <strong>dataItem</strong>- the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
     series: [{
         type: "area",
         data: [200, 450, 300, 125],
         tooltip: {
             visible: true,
             template: "#= value #"
         }
     }]
});
</code></pre>

<h3 id="configuration-series.tooltip.visible">
<a href="#configuration-series.tooltip.visible">series.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-series.width">
<a href="#configuration-series.width">series.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0.5)</em>
</h3>

<p>The line width.</p>

<p><strong>Available for line series</strong></p>

<h3 id="configuration-series.target">
<a href="#configuration-series.target">series.target </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The target of the bullet chart.</p>

<h3 id="configuration-series.target.line">
<a href="#configuration-series.target.line">series.target.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The target line.</p>

<h3 id="configuration-series.target.line.width">
<a href="#configuration-series.target.line.width">series.target.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The width of the line.</p>

<h3 id="configuration-series.target.color">
<a href="#configuration-series.target.color">series.target.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The target color.</p>

<h3 id="configuration-series.target.border">
<a href="#configuration-series.target.border">series.target.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The border of the target.</p>

<h3 id="configuration-series.target.border.color">
<a href="#configuration-series.target.border.color">series.target.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-series.target.border.dashType">
<a href="#configuration-series.target.border.dashType">series.target.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-series.target.border.width">
<a href="#configuration-series.target.border.width">series.target.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-series.notes">
<a href="#configuration-series.notes">series.notes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The series notes configuration.</p>

<h3 id="configuration-series.notes.icon">
<a href="#configuration-series.notes.icon">series.notes.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the notes.</p>

<h3 id="configuration-series.notes.position">
<a href="#configuration-series.notes.position">series.notes.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the series note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-series.notes.icon.background">
<a href="#configuration-series.notes.icon.background">series.notes.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the notes icon.</p>

<h3 id="configuration-series.notes.icon.border">
<a href="#configuration-series.notes.icon.border">series.notes.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h3 id="configuration-series.notes.icon.border.color">
<a href="#configuration-series.notes.icon.border.color">series.notes.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h3 id="configuration-series.notes.icon.border.width">
<a href="#configuration-series.notes.icon.border.width">series.notes.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h3 id="configuration-series.notes.icon.size">
<a href="#configuration-series.notes.icon.size">series.notes.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h3 id="configuration-series.notes.icon.type">
<a href="#configuration-series.notes.icon.type">series.notes.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
<li>"cross" - the marker shape is cross.</li>
</ul>

<h3 id="configuration-series.notes.icon.visible">
<a href="#configuration-series.notes.icon.visible">series.notes.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h3 id="configuration-series.notes.label">
<a href="#configuration-series.notes.label">series.notes.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the notes.</p>

<h3 id="configuration-series.notes.label.background">
<a href="#configuration-series.notes.label.background">series.notes.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-series.notes.label.border">
<a href="#configuration-series.notes.label.border">series.notes.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h3 id="configuration-series.notes.label.border.color">
<a href="#configuration-series.notes.label.border.color">series.notes.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-series.notes.label.border.dashType">
<a href="#configuration-series.notes.label.border.dashType">series.notes.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-series.notes.label.border.width">
<a href="#configuration-series.notes.label.border.width">series.notes.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h3 id="configuration-series.notes.label.color">
<a href="#configuration-series.notes.label.color">series.notes.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-series.notes.label.font">
<a href="#configuration-series.notes.label.font">series.notes.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the label.</p>

<h3 id="configuration-series.notes.label.template">
<a href="#configuration-series.notes.label.template">series.notes.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the point value</li>
</ul>

<h3 id="configuration-series.notes.label.visible">
<a href="#configuration-series.notes.label.visible">series.notes.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the series notes label. By default the series notes label are visible.</p>

<h3 id="configuration-series.notes.label.rotation">
<a href="#configuration-series.notes.label.rotation">series.notes.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h3 id="configuration-series.notes.label.format">
<a href="#configuration-series.notes.label.format">series.notes.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the notes label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the axis value.</p>

<h3 id="configuration-series.notes.label.position">
<a href="#configuration-series.notes.label.position">series.notes.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the labels.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-series.notes.line">
<a href="#configuration-series.notes.line">series.notes.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the notes.</p>

<h3 id="configuration-series.notes.line.width">
<a href="#configuration-series.notes.line.width">series.notes.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the notes.</p>

<h3 id="configuration-series.notes.line.color">
<a href="#configuration-series.notes.line.color">series.notes.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the notes.</p>

<h3 id="configuration-series.notes.line.length">
<a href="#configuration-series.notes.line.length">series.notes.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The length of the connecting lines in pixels.</p>

<h3 id="configuration-series.zIndex">
<a href="#configuration-series.zIndex">series.zIndex </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>An optional Z-index that can be used to change the default stacking order of series.</p>

<p>The series with the highest Z-index will be placed on top.</p>

<p>Series with no Z-index will use the default stacking order based on series type.
For example line series will be on top with bar and area following below.</p>

<h4>Example - Change the series stacking order</h4>

<pre><code>&lt;div id="sparkline"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#sparkline").kendoSparkline({
      series: [{
        type: "line",
        zIndex: 1,
        color: "grey",
        data: [1, 2, 1, 1, 2, 1]
      }, {
        type: "line",
        color: "blue",
        zIndex: 3,
        data: [2, 2, 2, 2, 2, 2]
      }, {
        type: "area",
        color: "red",
        zIndex: 2,
        data: [0, 2, 0, 0, 2, 0]
      }]
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-seriesColors">
<a href="#configuration-seriesColors">seriesColors </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The default colors for the chart's series. When all colors are used, new colors are pulled from the start again.</p>

<h3 id="configuration-seriesDefaults">
<a href="#configuration-seriesDefaults">seriesDefaults </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Default values for each series.</p>

<h3 id="configuration-seriesDefaults.area">
<a href="#configuration-seriesDefaults.area">seriesDefaults.area </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The area configuration options.
The default options for all area series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.bar">
<a href="#configuration-seriesDefaults.bar">seriesDefaults.bar </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The default options for all bar series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.border">
<a href="#configuration-seriesDefaults.border">seriesDefaults.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the series.</p>

<h3 id="configuration-seriesDefaults.border.color">
<a href="#configuration-seriesDefaults.border.color">seriesDefaults.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-seriesDefaults.border.dashType">
<a href="#configuration-seriesDefaults.border.dashType">seriesDefaults.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-seriesDefaults.border.width">
<a href="#configuration-seriesDefaults.border.width">seriesDefaults.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-seriesDefaults.column">
<a href="#configuration-seriesDefaults.column">seriesDefaults.column </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The column configuration options.
The default options for all column series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.gap">
<a href="#configuration-seriesDefaults.gap">seriesDefaults.gap </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1.5)</em>
</h3>

<p>The distance between category clusters.</p>

<h3 id="configuration-seriesDefaults.labels">
<a href="#configuration-seriesDefaults.labels">seriesDefaults.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the series data labels.</p>

<h3 id="configuration-seriesDefaults.labels.background">
<a href="#configuration-seriesDefaults.labels.background">seriesDefaults.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the labels. Any valid CSS color string will work here,
including hex and rgb.</p>

<h3 id="configuration-seriesDefaults.labels.border">
<a href="#configuration-seriesDefaults.labels.border">seriesDefaults.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-seriesDefaults.labels.border.color">
<a href="#configuration-seriesDefaults.labels.border.color">seriesDefaults.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-seriesDefaults.labels.border.dashType">
<a href="#configuration-seriesDefaults.labels.border.dashType">seriesDefaults.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-seriesDefaults.labels.border.width">
<a href="#configuration-seriesDefaults.labels.border.width">seriesDefaults.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-seriesDefaults.labels.color">
<a href="#configuration-seriesDefaults.labels.color">seriesDefaults.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the labels. Any valid CSS color string will work here, including hex
and rgb.</p>

<h3 id="configuration-seriesDefaults.labels.font">
<a href="#configuration-seriesDefaults.labels.font">seriesDefaults.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.
labels</p>

<h3 id="configuration-seriesDefaults.labels.format">
<a href="#configuration-seriesDefaults.labels.format">seriesDefaults.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The format of the labels.</p>

<h4>Example</h4>

<pre><code>//sets format of the labels
format: "C"
</code></pre>

<h3 id="configuration-seriesDefaults.labels.margin">
<a href="#configuration-seriesDefaults.labels.margin">seriesDefaults.labels.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The margin of the labels.</p>

<h3 id="configuration-seriesDefaults.labels.padding">
<a href="#configuration-seriesDefaults.labels.padding">seriesDefaults.labels.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-seriesDefaults.labels.template">
<a href="#configuration-seriesDefaults.labels.template">seriesDefaults.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The label template.
Template variables:</p>

<ul>
<li> <strong>value</strong>- the point value</li>
<li> <strong>category</strong>- the category name</li>
<li> <strong>series</strong>- the data series</li>
<li> <strong>dataItem</strong>- the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h3 id="configuration-seriesDefaults.labels.visible">
<a href="#configuration-seriesDefaults.labels.visible">seriesDefaults.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the labels.</p>

<h3 id="configuration-seriesDefaults.line">
<a href="#configuration-seriesDefaults.line">seriesDefaults.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line configuration options.
The default options for all line series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.overlay">
<a href="#configuration-seriesDefaults.overlay">seriesDefaults.overlay </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The effects overlay.</p>

<h3 id="configuration-seriesDefaults.pie">
<a href="#configuration-seriesDefaults.pie">seriesDefaults.pie </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The pie configuration options.
The default options for all pie series. For more details see the series options.</p>

<h3 id="configuration-seriesDefaults.spacing">
<a href="#configuration-seriesDefaults.spacing">seriesDefaults.spacing </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0.4)</em>
</h3>

<p>Space between bars.</p>

<h3 id="configuration-seriesDefaults.stack">
<a href="#configuration-seriesDefaults.stack">seriesDefaults.stack </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: false)</em>
</h3>

<p>A Boolean value indicating if the series should be stacked.</p>

<blockquote>
<p>The <code>stack</code> options is supported when <a href="#configuration-series.type">series.type</a> is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".</p>
</blockquote>

<h4>Example - configure stack series</h4>

<pre><code>&lt;span id="sparkline"&gt;&lt;/span&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
  seriesDefaults: {
    stack: true
  },
  series: [
    { data: [ 1, 2 , 3] },
    { data: [ 4, 5 , 6] }
  ]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-seriesDefaults.stack.type">
<a href="#configuration-seriesDefaults.stack.type">seriesDefaults.stack.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "normal")</em>
</h3>

<p>The type of stack to plot. The following types are supported:</p>

<ul>
<li>"normal" - the value of the stack is the sum of all points in the category (or group)</li>
<li>"100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.</li>
</ul>

<h4>Example - configure 100% stacked series</h4>

<pre><code>&lt;span id="sparkline"&gt;&lt;/span&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
  seriesDefaults: {
    stack: { type: "100%" }
  },
  series: [
    { data: [ 1, 2 ] },
    { data: [ 10, 20 ] }
  ]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-seriesDefaults.type">
<a href="#configuration-seriesDefaults.type">seriesDefaults.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The type of the series. Available types:</p>

<ul>
<li>area</li>
<li>column (synonym: bar)</li>
<li>line</li>
<li>pie</li>
<li>bullet</li>
</ul>

<h3 id="configuration-seriesDefaults.tooltip">
<a href="#configuration-seriesDefaults.tooltip">seriesDefaults.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data point tooltip configuration options.</p>

<h3 id="configuration-seriesDefaults.tooltip.background">
<a href="#configuration-seriesDefaults.tooltip.background">seriesDefaults.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip. The default is determined from the series color.</p>

<h3 id="configuration-seriesDefaults.tooltip.border">
<a href="#configuration-seriesDefaults.tooltip.border">seriesDefaults.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-seriesDefaults.tooltip.border.color">
<a href="#configuration-seriesDefaults.tooltip.border.color">seriesDefaults.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-seriesDefaults.tooltip.border.width">
<a href="#configuration-seriesDefaults.tooltip.border.width">seriesDefaults.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-seriesDefaults.tooltip.color">
<a href="#configuration-seriesDefaults.tooltip.color">seriesDefaults.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip. The default is the same as the series labels color.</p>

<h3 id="configuration-seriesDefaults.tooltip.font">
<a href="#configuration-seriesDefaults.tooltip.font">seriesDefaults.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-seriesDefaults.tooltip.format">
<a href="#configuration-seriesDefaults.tooltip.format">seriesDefaults.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format.</p>

<h4>Example</h4>

<pre><code>//sets format of the tooltip
format: "C"
</code></pre>

<h3 id="configuration-seriesDefaults.tooltip.padding">
<a href="#configuration-seriesDefaults.tooltip.padding">seriesDefaults.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-seriesDefaults.tooltip.template">
<a href="#configuration-seriesDefaults.tooltip.template">seriesDefaults.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li> <strong>value</strong>- the point value</li>
<li> <strong>category</strong>- the category name</li>
<li> <strong>series</strong>- the data series</li>
<li> <strong>dataItem</strong>- the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
    data: [200, 450, 300, 125],
     seriesDefaults: {
         tooltip: {
             visible: true,
             template: "#= value #"
         }
     }
});
</code></pre>

<h3 id="configuration-seriesDefaults.tooltip.visible">
<a href="#configuration-seriesDefaults.tooltip.visible">seriesDefaults.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-theme">
<a href="#configuration-theme">theme </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The sparkline theme. This can be either a built-in theme or "sass".
When set to "sass" the sparkline will read the variables from the <a href="/styles-and-layout/sass-themes">Sass-based themes</a>.</p>

<p>The supported values are:</p>

<ul>
<li>"sass" - special value, see notes</li>
<li>"black"</li>
<li>"blueopal"</li>
<li>"bootstrap"</li>
<li>"default"</li>
<li>"highcontrast"</li>
<li>"metro"</li>
<li>"metroblack"</li>
<li>"moonlight"</li>
<li>"silver"</li>
<li>"uniform"</li>
</ul>

<h3 id="configuration-tooltip">
<a href="#configuration-tooltip">tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data point tooltip configuration options.</p>

<h3 id="configuration-tooltip.background">
<a href="#configuration-tooltip.background">tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip. The default is determined from the series color.</p>

<h3 id="configuration-tooltip.border">
<a href="#configuration-tooltip.border">tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-tooltip.border.color">
<a href="#configuration-tooltip.border.color">tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-tooltip.border.width">
<a href="#configuration-tooltip.border.width">tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-tooltip.color">
<a href="#configuration-tooltip.color">tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip. The default is the same as the series labels color.</p>

<h3 id="configuration-tooltip.font">
<a href="#configuration-tooltip.font">tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-tooltip.format">
<a href="#configuration-tooltip.format">tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format.</p>

<h4>Example</h4>

<pre><code>//sets format of the tooltip
format: "C"
</code></pre>

<h3 id="configuration-tooltip.padding">
<a href="#configuration-tooltip.padding">tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-tooltip.template">
<a href="#configuration-tooltip.template">tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li> <strong>value</strong>- the point value</li>
<li> <strong>category</strong>- the category name</li>
<li> <strong>series</strong>- the data series</li>
<li> <strong>dataItem</strong>- the original data item used to construct the point.
    Will be null if binding to array.</li>
</ul>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
     data: [200, 450, 300, 125],
     tooltip: {
         template: "#= value #"
     }
});
</code></pre>

<h3 id="configuration-tooltip.visible">
<a href="#configuration-tooltip.visible">tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-tooltip.shared">
<a href="#configuration-tooltip.shared">tooltip.shared </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be shared.</p>

<h3 id="configuration-tooltip.sharedTemplate">
<a href="#configuration-tooltip.sharedTemplate">tooltip.sharedTemplate </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The shared tooltip template.
Template variables:</p>

<ul>
<li> <strong>points</strong>- the category points</li>
<li> <strong>category</strong>- the category name</li>
</ul>

<h4>Example</h4>

<pre><code>$("#chart").kendoChart({
     title: {
         text: "Internet Users"
     },
     series: [{
         name: "United States",
         data: [67.96, 68.93, 75, 74, 78]
     }, {
         name: "World",
         data: [15.7, 16.7, 20, 23.5, 26.6]
     }],
     categoryAxis: {
         categories: [2005, 2006, 2007, 2008, 2009]
     },
     tooltip: {
         visible: true,
         shared: true,
         sharedTemplate:
            "#= category # &lt;/br&gt;" +
            "# for (var i = 0; i &lt; points.length; i++) { #" +
                "#= points[i].series.name #: #= points[i].value # &lt;/br&gt;" +
            "# } #"
     }
});
</code></pre>

<h3 id="configuration-transitions">
<a href="#configuration-transitions">transitions </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if transition animations should be played.</p>

<h3 id="configuration-type">
<a href="#configuration-type">type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "line")</em>
</h3>

<p>The default series type.</p>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
    type: "bar",
    data: [1, 2, 3, 5]
});
</code></pre>

<h3 id="configuration-valueAxis">
<a href="#configuration-valueAxis">valueAxis </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The value axis configuration options.</p>

<h3 id="configuration-valueAxis.axisCrossingValue">
<a href="#configuration-valueAxis.axisCrossingValue">valueAxis.axisCrossingValue </a><code>Object  |</code><code> Date  |</code><code> Array</code>
</h3>

<p>Value at which the category axis crosses this axis. (Only for object)</p>

<p>Value indicies at which the category axes cross the value axis. (Only for array)</p>

<p>Date at which the category axis crosses this axis. (Only for date)</p>

<h3 id="configuration-valueAxis.color">
<a href="#configuration-valueAxis.color">valueAxis.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Color to apply to all axis elements.
Individual color settings for line and labels take priority. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-valueAxis.labels">
<a href="#configuration-valueAxis.labels">valueAxis.labels </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the axis labels.</p>

<h3 id="configuration-valueAxis.labels.background">
<a href="#configuration-valueAxis.labels.background">valueAxis.labels.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the labels. Any valid CSS color string will work here, including
hex and rgb</p>

<h3 id="configuration-valueAxis.labels.border">
<a href="#configuration-valueAxis.labels.border">valueAxis.labels.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the labels.</p>

<h3 id="configuration-valueAxis.labels.border.color">
<a href="#configuration-valueAxis.labels.border.color">valueAxis.labels.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-valueAxis.labels.border.dashType">
<a href="#configuration-valueAxis.labels.border.dashType">valueAxis.labels.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-valueAxis.labels.border.width">
<a href="#configuration-valueAxis.labels.border.width">valueAxis.labels.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-valueAxis.labels.color">
<a href="#configuration-valueAxis.labels.color">valueAxis.labels.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the labels. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-valueAxis.labels.font">
<a href="#configuration-valueAxis.labels.font">valueAxis.labels.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the labels.</p>

<h3 id="configuration-valueAxis.labels.format">
<a href="#configuration-valueAxis.labels.format">valueAxis.labels.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The format of the labels.</p>

<h3 id="configuration-valueAxis.labels.margin">
<a href="#configuration-valueAxis.labels.margin">valueAxis.labels.margin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: 0)</em>
</h3>

<p>The margin of the labels.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 0px (by default)
margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.labels.mirror">
<a href="#configuration-valueAxis.labels.mirror">valueAxis.labels.mirror </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Mirrors the axis labels and ticks.
If the labels are normally on the left side of the axis,
mirroring the axis will render them to the right.</p>

<h3 id="configuration-valueAxis.labels.padding">
<a href="#configuration-valueAxis.labels.padding">valueAxis.labels.padding </a><code>Number  |</code><code> Object</code><em>(default: 0)</em>
</h3>

<p>The padding of the labels.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.labels.rotation">
<a href="#configuration-valueAxis.labels.rotation">valueAxis.labels.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The rotation angle of the labels.</p>

<h3 id="configuration-valueAxis.labels.skip">
<a href="#configuration-valueAxis.labels.skip">valueAxis.labels.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>Number of labels to skip.
Skips rendering the first n labels.</p>

<h3 id="configuration-valueAxis.labels.step">
<a href="#configuration-valueAxis.labels.step">valueAxis.labels.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>Label rendering step.
Every n-th label is rendered where n is the step</p>

<h3 id="configuration-valueAxis.labels.template">
<a href="#configuration-valueAxis.labels.template">valueAxis.labels.template </a><code>String  |</code><code> Function</code>
</h3>

<p>The label template.
Template variables:</p>

<ul>
<li> <strong>value</strong>- the value</li>
</ul>

<h3 id="configuration-valueAxis.labels.visible">
<a href="#configuration-valueAxis.labels.visible">valueAxis.labels.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the labels.</p>

<h3 id="configuration-valueAxis.line">
<a href="#configuration-valueAxis.line">valueAxis.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the axis line. This will also affect the major and minor ticks, but not the grid lines.</p>

<h3 id="configuration-valueAxis.line.color">
<a href="#configuration-valueAxis.line.color">valueAxis.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the line. This will also effect the major and minor ticks, but
not the grid lines.</p>

<h3 id="configuration-valueAxis.line.dashType">
<a href="#configuration-valueAxis.line.dashType">valueAxis.line.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the line.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-valueAxis.line.visible">
<a href="#configuration-valueAxis.line.visible">valueAxis.line.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the line.</p>

<h3 id="configuration-valueAxis.line.width">
<a href="#configuration-valueAxis.line.width">valueAxis.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the line. This will also effect the major and minor ticks, but
not the grid lines.</p>

<h3 id="configuration-valueAxis.majorGridLines">
<a href="#configuration-valueAxis.majorGridLines">valueAxis.majorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the major grid lines. These are the lines that are an extension of the major ticks through the
body of the chart.</p>

<h3 id="configuration-valueAxis.majorGridLines.color">
<a href="#configuration-valueAxis.majorGridLines.color">valueAxis.majorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines.</p>

<h3 id="configuration-valueAxis.majorGridLines.visible">
<a href="#configuration-valueAxis.majorGridLines.visible">valueAxis.majorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-valueAxis.majorGridLines.width">
<a href="#configuration-valueAxis.majorGridLines.width">valueAxis.majorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the lines.</p>

<h3 id="configuration-valueAxis.majorGridLines.step">
<a href="#configuration-valueAxis.majorGridLines.step">valueAxis.majorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the value axis major grid lines.</p>

<h3 id="configuration-valueAxis.majorGridLines.skip">
<a href="#configuration-valueAxis.majorGridLines.skip">valueAxis.majorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the value axis major grid lines.</p>

<h3 id="configuration-valueAxis.majorTicks">
<a href="#configuration-valueAxis.majorTicks">valueAxis.majorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The major ticks of the axis.</p>

<h3 id="configuration-valueAxis.majorTicks.size">
<a href="#configuration-valueAxis.majorTicks.size">valueAxis.majorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 4)</em>
</h3>

<p>The axis major tick size. This is the length of the line in pixels that is drawn to indicate the tick on the chart.</p>

<h3 id="configuration-valueAxis.majorTicks.visible">
<a href="#configuration-valueAxis.majorTicks.visible">valueAxis.majorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the major ticks.</p>

<h3 id="configuration-valueAxis.majorTicks.color">
<a href="#configuration-valueAxis.majorTicks.color">valueAxis.majorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the value axis major ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-valueAxis.majorTicks.width">
<a href="#configuration-valueAxis.majorTicks.width">valueAxis.majorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the major ticks in pixels.</p>

<h3 id="configuration-valueAxis.majorTicks.step">
<a href="#configuration-valueAxis.majorTicks.step">valueAxis.majorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the value axis major ticks.</p>

<h3 id="configuration-valueAxis.majorTicks.skip">
<a href="#configuration-valueAxis.majorTicks.skip">valueAxis.majorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the value axis major ticks.</p>

<h3 id="configuration-valueAxis.majorUnit">
<a href="#configuration-valueAxis.majorUnit">valueAxis.majorUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The interval between major divisions.</p>

<h3 id="configuration-valueAxis.max">
<a href="#configuration-valueAxis.max">valueAxis.max </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The maximum value of the axis.
This is often used in combination with the<strong>min</strong>configuration option.</p>

<h3 id="configuration-valueAxis.min">
<a href="#configuration-valueAxis.min">valueAxis.min </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The minimum value of the axis.
This is often used in combination with the<strong>max</strong>configuration option.</p>

<h3 id="configuration-valueAxis.minorGridLines">
<a href="#configuration-valueAxis.minorGridLines">valueAxis.minorGridLines </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the minor grid lines.  These are the lines that are an extension of the minor ticks through the</p>

<h3 id="configuration-valueAxis.minorGridLines.color">
<a href="#configuration-valueAxis.minorGridLines.color">valueAxis.minorGridLines.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the lines.</p>

<p>Note that this has no effect if the visibility of the minor grid lines is not set to<strong>true</strong>.</p>

<h3 id="configuration-valueAxis.minorGridLines.dashType">
<a href="#configuration-valueAxis.minorGridLines.dashType">valueAxis.minorGridLines.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the minor grid lines.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
body of the chart.</p>

<p>Note that minor grid lines are not visible by default, therefore none of these settings will take effect without the minor grid lines visibility being set to<strong>true</strong>.</p>

<h3 id="configuration-valueAxis.minorGridLines.visible">
<a href="#configuration-valueAxis.minorGridLines.visible">valueAxis.minorGridLines.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the lines.</p>

<h3 id="configuration-valueAxis.minorGridLines.width">
<a href="#configuration-valueAxis.minorGridLines.width">valueAxis.minorGridLines.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 1)</em>
</h3>

<p>The width of the lines.</p>

<p>Note that this settings has no effect if the visibility of the minor grid lines is not set to<strong>true</strong>.</p>

<h3 id="configuration-valueAxis.minorGridLines.step">
<a href="#configuration-valueAxis.minorGridLines.step">valueAxis.minorGridLines.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the value axis minor grid lines.</p>

<h3 id="configuration-valueAxis.minorGridLines.skip">
<a href="#configuration-valueAxis.minorGridLines.skip">valueAxis.minorGridLines.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the value axis minor grid lines.</p>

<h3 id="configuration-valueAxis.minorTicks">
<a href="#configuration-valueAxis.minorTicks">valueAxis.minorTicks </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The minor ticks of the axis.</p>

<h3 id="configuration-valueAxis.minorTicks.size">
<a href="#configuration-valueAxis.minorTicks.size">valueAxis.minorTicks.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 3)</em>
</h3>

<p>The axis minor tick size. This is the length of the line in pixels that is drawn to indicate the tick on the chart.</p>

<h3 id="configuration-valueAxis.minorTicks.color">
<a href="#configuration-valueAxis.minorTicks.color">valueAxis.minorTicks.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the value axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.</p>

<h3 id="configuration-valueAxis.minorTicks.width">
<a href="#configuration-valueAxis.minorTicks.width">valueAxis.minorTicks.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The width of the minor ticks in pixels.</p>

<h3 id="configuration-valueAxis.minorTicks.visible">
<a href="#configuration-valueAxis.minorTicks.visible">valueAxis.minorTicks.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the minor ticks.</p>

<h3 id="configuration-valueAxis.minorTicks.step">
<a href="#configuration-valueAxis.minorTicks.step">valueAxis.minorTicks.step </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The step of the value axis minor ticks.</p>

<h3 id="configuration-valueAxis.minorTicks.skip">
<a href="#configuration-valueAxis.minorTicks.skip">valueAxis.minorTicks.skip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The skip of the value axis minor ticks.</p>

<h3 id="configuration-valueAxis.minorUnit">
<a href="#configuration-valueAxis.minorUnit">valueAxis.minorUnit </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The interval between minor divisions.
It defaults to 1/5th of the majorUnit.</p>

<h3 id="configuration-valueAxis.name">
<a href="#configuration-valueAxis.name">valueAxis.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a><em>(default: "primary")</em>
</h3>

<p>The unique axis name.</p>

<h3 id="configuration-valueAxis.narrowRange">
<a href="#configuration-valueAxis.narrowRange">valueAxis.narrowRange </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>Prevents the automatic axis range from snapping to 0.</p>

<h3 id="configuration-valueAxis.plotBands">
<a href="#configuration-valueAxis.plotBands">valueAxis.plotBands </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The plot bands of the value axis.</p>

<h3 id="configuration-valueAxis.plotBands.from">
<a href="#configuration-valueAxis.plotBands.from">valueAxis.plotBands.from </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The start position of the plot band in axis units.</p>

<h3 id="configuration-valueAxis.plotBands.to">
<a href="#configuration-valueAxis.plotBands.to">valueAxis.plotBands.to </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The end position of the plot band in axis units.</p>

<h3 id="configuration-valueAxis.plotBands.color">
<a href="#configuration-valueAxis.plotBands.color">valueAxis.plotBands.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the plot band.</p>

<h3 id="configuration-valueAxis.plotBands.opacity">
<a href="#configuration-valueAxis.plotBands.opacity">valueAxis.plotBands.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the plot band.</p>

<h3 id="configuration-valueAxis.reverse">
<a href="#configuration-valueAxis.reverse">valueAxis.reverse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>Reverses the axis direction -
values increase from right to left and from top to bottom.</p>

<h3 id="configuration-valueAxis.title">
<a href="#configuration-valueAxis.title">valueAxis.title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The title of the value axis.</p>

<h3 id="configuration-valueAxis.title.background">
<a href="#configuration-valueAxis.title.background">valueAxis.title.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the title. Any valid CSS color string will work here, including
hex and rgb.</p>

<h3 id="configuration-valueAxis.title.border">
<a href="#configuration-valueAxis.title.border">valueAxis.title.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the title.</p>

<h3 id="configuration-valueAxis.title.border.color">
<a href="#configuration-valueAxis.title.border.color">valueAxis.title.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-valueAxis.title.border.dashType">
<a href="#configuration-valueAxis.title.border.dashType">valueAxis.title.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<h4><em>"solid"</em></h4>

<p>Specifies a solid line.</p>

<h4><em>"dot"</em></h4>

<p>Specifies a line consisting of dots.</p>

<h4><em>"dash"</em></h4>

<p>Specifies a line consisting of dashes.</p>

<h4><em>"longDash"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash.</p>

<h4><em>"dashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of dash-dot.</p>

<h4><em>"longDashDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot.</p>

<h4><em>"longDashDotDot"</em></h4>

<p>Specifies a line consisting of a repeating pattern of long-dash-dot-dot.</p>

<h3 id="configuration-valueAxis.title.border.width">
<a href="#configuration-valueAxis.title.border.width">valueAxis.title.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-valueAxis.title.color">
<a href="#configuration-valueAxis.title.color">valueAxis.title.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the title. Any valid CSS color string will work here, including hex and rgb.</p>

<h3 id="configuration-valueAxis.title.font">
<a href="#configuration-valueAxis.title.font">valueAxis.title.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "16px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the title.</p>

<h3 id="configuration-valueAxis.title.margin">
<a href="#configuration-valueAxis.title.margin">valueAxis.title.margin </a><code>Number  |</code><code> Object</code><em>(default: 5)</em>
</h3>

<p>The margin of the title.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 0px (by default)
margin: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.title.padding">
<a href="#configuration-valueAxis.title.padding">valueAxis.title.padding </a><code>Number  |</code><code> Object</code><em>(default: 0)</em>
</h3>

<p>The padding of the title.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.title.position">
<a href="#configuration-valueAxis.title.position">valueAxis.title.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "center")</em>
</h3>

<p>The position of the title.</p>

<h4><em>"top"</em></h4>

<p>The axis title is positioned on the top (applicable to vertical axis).</p>

<h4><em>"bottom"</em></h4>

<p>The axis title is positioned on the bottom (applicable to vertical axis).</p>

<h4><em>"left"</em></h4>

<p>The axis title is positioned on the left (applicable to horizontal axis).</p>

<h4><em>"right"</em></h4>

<p>"The axis title is positioned on the right (applicable to horizontal axis).</p>

<h4><em>"center"</em></h4>

<p>"The axis title is positioned in the center.</p>

<h3 id="configuration-valueAxis.title.rotation">
<a href="#configuration-valueAxis.title.rotation">valueAxis.title.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The rotation angle of the title.</p>

<h3 id="configuration-valueAxis.title.text">
<a href="#configuration-valueAxis.title.text">valueAxis.title.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text of the title.</p>

<h3 id="configuration-valueAxis.title.visible">
<a href="#configuration-valueAxis.title.visible">valueAxis.title.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The visibility of the title.</p>

<h3 id="configuration-valueAxis.visible">
<a href="#configuration-valueAxis.visible">valueAxis.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>The visibility of the axis.</p>

<h3 id="configuration-valueAxis.crosshair">
<a href="#configuration-valueAxis.crosshair">valueAxis.crosshair </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair configuration options.</p>

<h3 id="configuration-valueAxis.crosshair.color">
<a href="#configuration-valueAxis.crosshair.color">valueAxis.crosshair.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.width">
<a href="#configuration-valueAxis.crosshair.width">valueAxis.crosshair.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The width of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.opacity">
<a href="#configuration-valueAxis.crosshair.opacity">valueAxis.crosshair.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The opacity of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.dashType">
<a href="#configuration-valueAxis.crosshair.dashType">valueAxis.crosshair.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The dash type of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.visible">
<a href="#configuration-valueAxis.crosshair.visible">valueAxis.crosshair.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>The dash type of the crosshair.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip">
<a href="#configuration-valueAxis.crosshair.tooltip">valueAxis.crosshair.tooltip </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The crosshair tooltip configuration options.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.background">
<a href="#configuration-valueAxis.crosshair.tooltip.background">valueAxis.crosshair.tooltip.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the tooltip.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.border">
<a href="#configuration-valueAxis.crosshair.tooltip.border">valueAxis.crosshair.tooltip.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border configuration options.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.border.color">
<a href="#configuration-valueAxis.crosshair.tooltip.border.color">valueAxis.crosshair.tooltip.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "black")</em>
</h3>

<p>The color of the border.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.border.width">
<a href="#configuration-valueAxis.crosshair.tooltip.border.width">valueAxis.crosshair.tooltip.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 0)</em>
</h3>

<p>The width of the border.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.color">
<a href="#configuration-valueAxis.crosshair.tooltip.color">valueAxis.crosshair.tooltip.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the tooltip.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.font">
<a href="#configuration-valueAxis.crosshair.tooltip.font">valueAxis.crosshair.tooltip.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The tooltip font.</p>

<h3 id="configuration-valueAxis.crosshair.tooltip.format">
<a href="#configuration-valueAxis.crosshair.tooltip.format">valueAxis.crosshair.tooltip.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The tooltip format.</p>

<h4>Example</h4>

<pre><code>//sets format of the tooltip
format: "C"
</code></pre>

<h3 id="configuration-valueAxis.crosshair.tooltip.padding">
<a href="#configuration-valueAxis.crosshair.tooltip.padding">valueAxis.crosshair.tooltip.padding </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The padding of the tooltip.</p>

<h4>Example</h4>

<pre><code>// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
</code></pre>

<h3 id="configuration-valueAxis.crosshair.tooltip.template">
<a href="#configuration-valueAxis.crosshair.tooltip.template">valueAxis.crosshair.tooltip.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The tooltip template.
Template variables:</p>

<ul>
<li> <strong>value</strong>- the point value (either a number or an object)</li>
</ul>

<h4>Example</h4>

<pre><code>// chart initialization
$("#sparkline").kendoSparkline({
     data: [200, 450, 300, 125],
     valueAxis: {
         crosshair: {
             visible: true,
             tooltip: {
                 visible: true,
                 template: "value: #= value #"
             }
         }
     }
});
</code></pre>

<h3 id="configuration-valueAxis.crosshair.tooltip.visible">
<a href="#configuration-valueAxis.crosshair.tooltip.visible">valueAxis.crosshair.tooltip.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>A value indicating if the tooltip should be displayed.</p>

<h3 id="configuration-valueAxis.notes">
<a href="#configuration-valueAxis.notes">valueAxis.notes </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The value axis notes configuration.</p>

<h3 id="configuration-valueAxis.notes.position">
<a href="#configuration-valueAxis.notes.position">valueAxis.notes.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the value axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-valueAxis.notes.icon">
<a href="#configuration-valueAxis.notes.icon">valueAxis.notes.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the notes.</p>

<h3 id="configuration-valueAxis.notes.icon.background">
<a href="#configuration-valueAxis.notes.icon.background">valueAxis.notes.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the notes icon.</p>

<h4>Example - set the value axis notes icon background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.border">
<a href="#configuration-valueAxis.notes.icon.border">valueAxis.notes.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h4>Example - set the value axis notes icon border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.border.color">
<a href="#configuration-valueAxis.notes.icon.border.color">valueAxis.notes.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h4>Example - set the value axis notes icon border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.border.width">
<a href="#configuration-valueAxis.notes.icon.border.width">valueAxis.notes.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h4>Example - set the value axis notes icon border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.size">
<a href="#configuration-valueAxis.notes.icon.size">valueAxis.notes.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h4>Example - set the value axis notes icon size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        size: 30
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.type">
<a href="#configuration-valueAxis.notes.icon.type">valueAxis.notes.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
</ul>

<h4>Example - set the value axis notes icon shape</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        shape: "triangle"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.icon.visible">
<a href="#configuration-valueAxis.notes.icon.visible">valueAxis.notes.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h4>Example - set the value axis notes icon visibility</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label">
<a href="#configuration-valueAxis.notes.label">valueAxis.notes.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the notes.</p>

<h3 id="configuration-valueAxis.notes.label.background">
<a href="#configuration-valueAxis.notes.label.background">valueAxis.notes.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis label background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.border">
<a href="#configuration-valueAxis.notes.label.border">valueAxis.notes.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h4>Example - set the value axis label border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          color: "green",
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.border.color">
<a href="#configuration-valueAxis.notes.label.border.color">valueAxis.notes.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis label border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          color: "green"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.border.dashType">
<a href="#configuration-valueAxis.notes.label.border.dashType">valueAxis.notes.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the value axis label border dash type</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.border.width">
<a href="#configuration-valueAxis.notes.label.border.width">valueAxis.notes.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h4>Example - set the value axis label border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.color">
<a href="#configuration-valueAxis.notes.label.color">valueAxis.notes.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis label color as a hex string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.font">
<a href="#configuration-valueAxis.notes.label.font">valueAxis.notes.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the label.</p>

<h4>Example - set the chart series label font</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        font: "20px sans-serif"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.template">
<a href="#configuration-valueAxis.notes.label.template">valueAxis.notes.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the value value</li>
</ul>

<h4>Example - set the value axis notes label template as a string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        template: "Year: #: value #"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.visible">
<a href="#configuration-valueAxis.notes.label.visible">valueAxis.notes.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the value axis notes label. By default the value axis notes label are visible.</p>

<h4>Example - hide the value axis notes label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.rotation">
<a href="#configuration-valueAxis.notes.label.rotation">valueAxis.notes.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h4>Example - rotate the value axis notes label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        rotation: 90
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.format">
<a href="#configuration-valueAxis.notes.label.format">valueAxis.notes.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the notes label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the axis value.</p>

<h4>Example - set the value axis notes label format</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        format: "value slot: {0}"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.label.position">
<a href="#configuration-valueAxis.notes.label.position">valueAxis.notes.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the labels.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-valueAxis.notes.line">
<a href="#configuration-valueAxis.notes.line">valueAxis.notes.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the notes.</p>

<h3 id="configuration-valueAxis.notes.line.width">
<a href="#configuration-valueAxis.notes.line.width">valueAxis.notes.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the notes.</p>

<h4>Example - set the value axis notes line width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        width: 4
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.line.color">
<a href="#configuration-valueAxis.notes.line.color">valueAxis.notes.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the notes.</p>

<h4>Example - set the value axis notes color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.line.length">
<a href="#configuration-valueAxis.notes.line.length">valueAxis.notes.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line length of the notes.</p>

<h4>Example - set the value axis notes color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        length: 20
      },
      data: [{ value: 1 }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data">
<a href="#configuration-valueAxis.notes.data">valueAxis.notes.data </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The items of the notes.</p>

<h3 id="configuration-valueAxis.notes.data.value">
<a href="#configuration-valueAxis.notes.data.value">valueAxis.notes.data.value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The value of the note.</p>

<h3 id="configuration-valueAxis.notes.data.position">
<a href="#configuration-valueAxis.notes.data.position">valueAxis.notes.data.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The position of the value axis note.</p>

<ul>
<li>"top" - The note is positioned on the top.</li>
<li>"bottom" - The note is positioned on the bottom.</li>
<li>"left" - The note is positioned on the left.</li>
<li>"right" - The note is positioned on the right.</li>
</ul>

<h3 id="configuration-valueAxis.notes.data.icon">
<a href="#configuration-valueAxis.notes.data.icon">valueAxis.notes.data.icon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The icon of the note.</p>

<h3 id="configuration-valueAxis.notes.data.icon.background">
<a href="#configuration-valueAxis.notes.data.icon.background">valueAxis.notes.data.icon.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the note icon.</p>

<h4>Example - set the value axis note icon background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          background: "red"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.border">
<a href="#configuration-valueAxis.notes.data.icon.border">valueAxis.notes.data.icon.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the icon.</p>

<h4>Example - set the value axis note icon border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.border.color">
<a href="#configuration-valueAxis.notes.data.icon.border.color">valueAxis.notes.data.icon.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The border color of the icon.</p>

<h4>Example - set the value axis note icon border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.border.width">
<a href="#configuration-valueAxis.notes.data.icon.border.width">valueAxis.notes.data.icon.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The border width of the icon.</p>

<h4>Example - set the value axis note icon border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.size">
<a href="#configuration-valueAxis.notes.data.icon.size">valueAxis.notes.data.icon.size </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The size of the icon.</p>

<h4>Example - set the value axis note icon size</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          size: 30
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.type">
<a href="#configuration-valueAxis.notes.data.icon.type">valueAxis.notes.data.icon.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "circle")</em>
</h3>

<p>The icon shape.</p>

<p>The supported values are:</p>

<ul>
<li>"circle" - the marker shape is circle.</li>
<li>"square" - the marker shape is square.</li>
<li>"triangle" - the marker shape is triangle.</li>
</ul>

<h4>Example - set the value axis note icon shape</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          shape: "triangle"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.icon.visible">
<a href="#configuration-valueAxis.notes.data.icon.visible">valueAxis.notes.data.icon.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: "true")</em>
</h3>

<p>The icon visibility.</p>

<h4>Example - set the value axis note icon visibility</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          visible: false
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label">
<a href="#configuration-valueAxis.notes.data.label">valueAxis.notes.data.label </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The label of the note.</p>

<h3 id="configuration-valueAxis.notes.data.label.background">
<a href="#configuration-valueAxis.notes.data.label.background">valueAxis.notes.data.label.background </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The background color of the label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis note label background</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notesdata {
      data: [{
        value: 1,
        label: {
          background: "red"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.border">
<a href="#configuration-valueAxis.notes.data.label.border">valueAxis.notes.data.label.border </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The border of the label.</p>

<h4>Example - set the value axis note label border</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green",
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.border.color">
<a href="#configuration-valueAxis.notes.data.label.border.color">valueAxis.notes.data.label.border.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "black")</em>
</h3>

<p>The color of the border. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis note label border color</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green"
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.border.dashType">
<a href="#configuration-valueAxis.notes.data.label.border.dashType">valueAxis.notes.data.label.border.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "solid")</em>
</h3>

<p>The dash type of the border.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h4>Example - set the value axis note label border dash type</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.border.width">
<a href="#configuration-valueAxis.notes.data.label.border.width">valueAxis.notes.data.label.border.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.</p>

<h4>Example - set the value axis note label border width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            width: 1
          }
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.color">
<a href="#configuration-valueAxis.notes.data.label.color">valueAxis.notes.data.label.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text color of the note label. Accepts a valid CSS color string, including hex and rgb.</p>

<h4>Example - set the value axis note label color as a hex string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.font">
<a href="#configuration-valueAxis.notes.data.label.font">valueAxis.notes.data.label.font </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "12px Arial,Helvetica,sans-serif")</em>
</h3>

<p>The font style of the note label.</p>

<h4>Example - set the value axis note label font</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          font: "20px sans-serif"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.template">
<a href="#configuration-valueAxis.notes.data.label.template">valueAxis.notes.data.label.template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/framework/kendo#methods-template">template</a> which renders the labels.</p>

<p>The fields which can be used in the template are:</p>

<ul>
<li>value - the axis value</li>
</ul>

<h4>Example - set the value axis note label template as a string</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          template: "Year: #: value #"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.visible">
<a href="#configuration-valueAxis.notes.data.label.visible">valueAxis.notes.data.label.visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>true</code> the chart will display the value axis notes label. By default the value axis notes label are visible.</p>

<h4>Example - hide the value axis note label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          visible: false
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.rotation">
<a href="#configuration-valueAxis.notes.data.label.rotation">valueAxis.notes.data.label.rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle of the label. By default the label are not rotated.</p>

<h4>Example - rotate the value axis note label</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          rotation: 90
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.format">
<a href="#configuration-valueAxis.notes.data.label.format">valueAxis.notes.data.label.format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "{0}")</em>
</h3>

<p>The format used to display the note label. Uses <a href="/api/framework/kendo#methods-format">kendo.format</a>. Contains one placeholder ("{0}") which represents the axis value.</p>

<h4>Example - set the value axis note label format</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          format: "value slot: {0}"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.text">
<a href="#configuration-valueAxis.notes.data.label.text">valueAxis.notes.data.label.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The label note text.</p>

<h4>Example - set the value axis label note text</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          text: "A"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.label.position">
<a href="#configuration-valueAxis.notes.data.label.position">valueAxis.notes.data.label.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "inside")</em>
</h3>

<p>The position of the value axis note label.</p>

<ul>
<li>"inside" - the label is positioned inside of the icon.</li>
<li>"outside" - the label is positioned outside of the icon.</li>
</ul>

<h3 id="configuration-valueAxis.notes.data.line">
<a href="#configuration-valueAxis.notes.data.line">valueAxis.notes.data.line </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The line of the note.</p>

<h3 id="configuration-valueAxis.notes.data.line.width">
<a href="#configuration-valueAxis.notes.data.line.width">valueAxis.notes.data.line.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line width of the note.</p>

<h4>Example - set the value axis note line width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          width: 4
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.line.color">
<a href="#configuration-valueAxis.notes.data.line.color">valueAxis.notes.data.line.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The line color of the note.</p>

<h4>Example - set the value axis note color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-valueAxis.notes.data.line.length">
<a href="#configuration-valueAxis.notes.data.line.length">valueAxis.notes.data.line.length </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The line length of the note.</p>

<h4>Example - set the value axis note color width</h4>

<pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          length: 20
        }
      }]
    }
  }
});
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Prepares the Sparkline for safe removal from the DOM.</p>

<p>Detaches event handlers and removes data entries in order to avoid memory leaks.</p>

<h3 id="methods-exportImage"><a href="#methods-exportImage">exportImage</a></h3>

<p>Exports the chart as an image.</p>

<p>Inherited from <a href="chart#methods-exportImage">Chart.exportImage</a></p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(optional)</em>
</h5>

<p>Parameters for the exported image.</p>

<h5>options.width <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The width of the exported image. Defaults to the chart width.</p>

<h5>options.height <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The height of the exported image. Defaults to the chart height.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a PNG image encoded as a Data URI.</p>

<h3 id="methods-exportPDF"><a href="#methods-exportPDF">exportPDF</a></h3>

<p>Exports the chart as a PDF file.</p>

<p>Inherited from <a href="chart#methods-exportPDF">Chart.exportPDF</a></p>

<h4>Parameters</h4>

<h5>options <a href="/api/javascript/drawing/pdfoptions" class="type-link"><code>kendo.drawing.PDFOptions</code></a> <em>(optional)</em>
</h5>

<p>Parameters for the exported PDF file.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a PDF file encoded as a Data URI.</p>

<h3 id="methods-exportSVG"><a href="#methods-exportSVG">exportSVG</a></h3>

<p>Exports the chart as an SVG document.</p>

<p>Inherited from <a href="chart#methods-exportSVG">Chart.exportSVG</a></p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(optional)</em>
</h5>

<p>Export options.</p>

<h5>options.raw <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h5>

<p>Resolves the promise with the raw SVG document without the Data URI prefix.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a SVG document encoded as a Data URI.</p>

<h3 id="methods-refresh"><a href="#methods-refresh">refresh</a></h3>

<p>Reloads the data and repaints the chart.</p>

<h3 id="methods-setDataSource"><a href="#methods-setDataSource">setDataSource</a></h3>

<p>Sets the dataSource of an existing Chart and rebinds it.</p>

<h4>Parameters</h4>

<h5>dataSource <a href="/api/javascript/data/datasource" class="type-link"><code>kendo.data.DataSource</code></a>
</h5>

<h3 id="methods-setOptions"><a href="#methods-setOptions">setOptions</a></h3>

<p>Sets the widget options. Changes are cumulative.</p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The chart settings to update.</p>

<h4>Example - change the chart theme</h4>

<pre><code>&lt;span id="sparkline"&gt;&lt;/span&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
  theme: "black",
  data: [1, 2, 3]
});

var sparkline = $("#sparkline").data("kendoSparkline");
sparkline.setOptions({ theme: "uniform" });
&lt;/script&gt;
</code></pre>

<h3 id="methods-svg"><a href="#methods-svg">svg</a></h3>

<p>Returns the <a href="http://www.w3.org/Graphics/SVG/">SVG</a> representation of the chart.
The returned string is a self-contained SVG document that can be used as is or
converted to other formats using tools like <a href="http://inkscape.org/">Inkscape</a> and
<a href="http://www.imagemagick.org/">ImageMagick</a>.
Both programs provide command-line interface suitable for server-side processing.</p>

<blockquote>
<p>This method is obsoleted by <a href="#methods-exportSVG">exportSVG</a>, but will remain fully functional.</p>
</blockquote>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the SVG representation of the sparkline.</p>

<h4>Example</h4>

<pre><code>&lt;span id="sparkline"&gt;&lt;/div&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
    type: "column",
    data: [1, 2, 3, 4]
});
var sparkline = $("#sparkline").data("kendoSparkline");
var svg = sparkline.svg();
console.log(svg); // displays the SVG string
&lt;/script&gt;
</code></pre>

<h3 id="methods-imageDataURL"><a href="#methods-imageDataURL">imageDataURL</a></h3>

<p>Returns a PNG image of the sparkline encoded as a <a href="https://developer.mozilla.org/en-US/docs/data_URIs">Data URL</a>.</p>

<blockquote>
<p>This method is deprecated and replaced by <a href="#methods-exportImage">exportImage</a>.</p>
</blockquote>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> A data URL with <code>image/png</code> MIME type. Will be <code>null</code> if the browser does not support the <code>canvas</code> element.</p>

<h4>Example - show a snapshot of the Sparkline</h4>

<pre><code>&lt;span id="sparkline"&gt;&lt;/div&gt;
&lt;a download="export.png" id="export" class="k-button"&gt;Export PNG&lt;/a&gt;
&lt;script&gt;
$("#sparkline").kendoSparkline({
    type: "column",
    data: [1, 2, 3, 4]
});

$("#export").on("click", function() {
  var sparkline = $("#sparkline").data("kendoSparkline");
  var imageDataURL = sparkline.imageDataURL();

  if (navigator.msSaveBlob) {
    var blob = toBlob(imageDataURL, "image/png");
    navigator.msSaveBlob(blob, this.getAttribute("download"));
  } else {
    this.href = imageDataURL;
  }
});

// See: http://goo.gl/qlg5dd
function toBlob(base64, type) {
  var rawData = base64.substring(base64.indexOf("base64,") + 7);
  var data = atob(rawData);
  var arr = new Uint8Array(data.length);

  for (var i = 0; i &lt; data.length; ++i) {
    arr[i] = data.charCodeAt(i);
  }

  return new Blob([ arr.buffer ], { type: type });
}
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-axisLabelClick"><a href="#events-axisLabelClick">axisLabelClick</a></h3>

<p>Fires when an axis label is clicked.</p>

<h4>Example</h4>

<pre><code>function onAxisLabelClick(e) {
    alert("Clicked " + e.axis.type + " axis label with value: " + e.value);
}
</code></pre>

<h4>Event Data</h4>

<h5>e.axis <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The axis that the label belongs to.</p>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The label value or category name.</p>

<h5>e.text <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The label text.</p>

<h5>e.index <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The label sequential index or category index.</p>

<h5>e.dataItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original data item used to generate the label.
<strong>Applicable only for data bound category axis.</strong></p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the label.</p>

<h3 id="events-dataBound"><a href="#events-dataBound">dataBound</a></h3>

<p>Fires when the sparkline has received data from the data source
and is about to render it.</p>

<h4>Example</h4>

<pre><code>function onDataBound(e) {
    // Series data is now available
}
</code></pre>

<h3 id="events-dragStart"><a href="#events-dragStart">dragStart</a></h3>

<p>Fires when the user has used the mouse or a swipe gesture to drag the sparkline.</p>

<p>The drag operation can be aborted by calling <code>e.preventDefault()</code>.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the initial range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the drag action.</p>

<h3 id="events-drag"><a href="#events-drag">drag</a></h3>

<p>Fires as long as the user is dragging the sparkline using the mouse or swipe gestures.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the suggested current range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<p>Note that the axis ranges are not updated automatically. You need to call
set_options with either the suggested or custom min/max values for them to take effect.</p>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
    valueAxis: {
        name: "price"
    },
    drag: onDrag
    ...
}

function onDrag(e) {
    var minPrice = e.axisRanges.price.min;
}
</code></pre>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the drag action.</p>

<h3 id="events-dragEnd"><a href="#events-dragEnd">dragEnd</a></h3>

<p>Fires when the user stops dragging the sparkline.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the final range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the drag action.</p>

<h3 id="events-plotAreaClick"><a href="#events-plotAreaClick">plotAreaClick</a></h3>

<p>Fires when plot area is clicked.</p>

<h4>Example</h4>

<pre><code>function onPlotAreaClick(e) {
    alert("Clicked X axis value: " + e.x);
}
</code></pre>

<h4>Event Data</h4>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value.
Available only for categorical charts (bar, line, area and similar).</p>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category.
Available only for categorical charts (bar, line, area and similar).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the plot area.</p>

<h5>e.x <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The X axis value or array of values for multi-axis charts.</p>

<h5>e.y <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The X axis value or array of values for multi-axis charts.</p>

<h3 id="events-seriesClick"><a href="#events-seriesClick">seriesClick</a></h3>

<p>Fires when chart series are clicked.</p>

<h4>Example</h4>

<pre><code>function onSeriesClick(e) {
    alert("Clicked value: " + e.value);
}
</code></pre>

<h4>Event Data</h4>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value.</p>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category</p>

<h5>e.series <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The clicked series.</p>

<h5>e.series.type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The series type</p>

<h5>e.series.name <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The series name</p>

<h5>e.series.data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>The series data points</p>

<h5>e.dataItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original data item (when binding to dataSource).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the data point.</p>

<h5>e.percentage <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.</p>

<h3 id="events-seriesHover"><a href="#events-seriesHover">seriesHover</a></h3>

<p>Fires when chart series are hovered.</p>

<h4>Example</h4>

<pre><code>function onSeriesHover(e) {
    alert("Hovered value: " + e.value);
}
</code></pre>

<h4>Event Data</h4>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point value.</p>

<h5>e.category <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The data point category</p>

<h5>e.series <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The clicked series.</p>

<h5>e.series.type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The series type</p>

<h5>e.series.name <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The series name</p>

<h5>e.series.data <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>The series data points</p>

<h5>e.dataItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original data item (when binding to dataSource).</p>

<h5>e.element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The DOM element of the data point.</p>

<h5>e.percentage <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.</p>

<h3 id="events-zoomStart"><a href="#events-zoomStart">zoomStart</a></h3>

<p>Fires when the user has used the mousewheel to zoom the chart.</p>

<p>The zoom operation can be aborted by calling <code>e.preventDefault()</code>.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the initial range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the zoom action.</p>

<h3 id="events-zoom"><a href="#events-zoom">zoom</a></h3>

<p>Fires as long as the user is zooming the chart using the mousewheel.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the suggested current range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<p>Note that the axis ranges are not updated automatically. You need to call
set_options with either the suggested or custom min/max values for them to take effect.</p>

<h4>Example</h4>

<pre><code>$("#sparkline").kendoSparkline({
    valueAxis: {
        name: "price"
    },
    zoom: onZoom
    ...
}

function onZoom(e) {
    var minPrice = e.axisRanges.price.min;
}
</code></pre>

<h5>e.delta <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>A number that indicates the zoom amount and direction.</p>

<p>A negative delta indicates "zoom in", while a positive "zoom out".</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the zoom action.</p>

<p>This event can be used to prevent the default mousewheel action (scroll).</p>

<h4>Example</h4>

<pre><code>function onZoom(e) {
    // Prevent window scroll
    e.originalEvent.preventDefault();
}
</code></pre>

<h3 id="events-zoomEnd"><a href="#events-zoomEnd">zoomEnd</a></h3>

<p>Fires when the user stops zooming the chart.</p>

<h4>Event Data</h4>

<h5>e.axisRanges <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>A hastable containing the final range (min and max values) of <em>named</em> axes.
The axis name is used as a key.</p>

<h5>e.originalEvent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The original user event that triggered the zoom action.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

